오늘 "그림자 DOM"을 사용 하시겠습니까?

Question

그림자 DOM 및 웹 구성 요소에 대해 매우 분실했습니다. 따라서 내게 용서하십시오.

그림자 DOM의 생각은 앱의 모든 데이터를 API가 작동하는 데이터 구조 안에 두는 것입니다. 전통적인 DOM과 완전히 같습니다. 옳은?

단순히 데이터를 처리하고, 데이터를 처리하고, 데이터를 쿼리하고, 데이터를 간단하게 처리하는 목적은 모든 사람들이 이미 알고있는 API를 사용하는 사실상의 표준 방법을 제공함으로써 쉽게 만듭니다. 옳은?

그렇다면 라이브러리를 사용하면 이런 식으로 일을 시작할 수 있습니다.

Answer 1

확실히 웹 구성 요소 (캡슐화 된 재사용 가능한 DOM 요소에서 전체 앱을 감싸는 것)의 목적 중 하나입니다. 그런 식으로만 사용하는 것이 정당합니다. 그러나 이상적인 사용법은 앱 에까지 미치게됩니다. 재사용 가능한 "위젯"으로 생각할 수있는 앱의 모든 부분도 Shadow DOM 캡슐화의 이점을 얻을 수 있습니다. 구성 요소 사이에 명확한 경계와 잘 정의 된 API가있는 50 명의 팀이 개발 한 응용 프로그램을 상상해보십시오. CSS가 거의 충돌하지 않고, 읽기 어려운 코드이며, 그 크기 근처의 대부분의 웹 앱이 오늘날 가지고있는 밀접한 결합이있을 것입니다.

오늘날 이러한 최첨단 기술을 사용하는 한 Google의 오픈 소스 Polymer Project을 확인하십시오. 여기에는 웹 컴포넌트와 모든 관련 기술을 모든 최신 브라우저에 제공하는 폴리필 세트가 포함되어 있습니다.이 구성 요소로 작업하는 것이 훨씬 더 즐겁습니다.

Answer 2

은 또한, 나는 W3C에서 주제에 이걸 발견 :

• 문서 트리가 그 루트 노드 문서 인 노드 트리 [DOM]입니다.
• 모든 요소는 섀도우 트리라고하는 0 개 또는 하나의 관련 노드 트리를 호스팅 할 수 있습니다.
• 그림자 루트는 그림자 트리의 루트 노드입니다.
• 구성 요소 트리는 문서 트리 또는 섀도우 트리입니다. 난 그냥 표시 한 내용을 기반으로

그래서, 내가 찾은 최고의 설명 What the Heck is Shadow DOM?에서이 다음과 같습니다

그림자 DOM 하위 트리를 포함하는 브라우저의 기능을 의미 DOM 요소를 문서 렌더링에 적용 할 수 있지만 DOM 문서는 DOM 파일에 포함되지 않습니다.

중요한 사용 사례는 웹 페이지의 비디오 컨트롤입니다. 마크 업에는 일부 속성 및 소스 태그가있는 비디오 태그 만 표시됩니다. 모든 비디오 작업이 작동하는 추가 코드는 그림자 DOM에 숨겨져 있으며 나머지 페이지에서는 사용할 수 없습니다. <video> 태그의 실제 마크 업, 자바 스크립트 및 스타일이 캡슐화되어 각 브라우저 공급 업체에서 이미 작성한 비디오 컨트롤의 구현 세부 정보가 숨겨집니다.

그래서 DOM에있는 동안 렌더링하는 페이지에서 숨겨집니다. 따라서 그림자 DOM을 보려면 Chrome의 개발 도구 아래에서 사용할 수 있습니다.아래 그림과 같이

그럼 당신은 그것을 볼 수 있습니다

짧은 대답은 그림자 DOM은 웹 구성 요소를 구성하는 네 가지 기술 중 하나라는 것이다. 그것이 일반적으로 Web Components와의 관계입니다.

웹 구성 요소는 다음과 같습니다. W3C의 구성 요소 플랫폼으로 표준화 된 빌딩 블록으로 웹 사이트를 구성 할 수 있습니다. 웹 구성 요소는 사용자 지정 요소, 그림자 DOM 및 HTML 가져 오기 및 템플릿으로 구성됩니다.

1. 사용자 정의 요소 : 그림자 DOM은 웹 구성 요소의 기술이있는 동안

   그래서, (각각 별도로 사용할 수 있지만) MDN's page on Web Components는이 네 가지 기술로 구성 참조 자신을 만들 수있는 기능입니다 맞춤 HTML 태그 및 요소. 그들은 자신 만의 스크립팅 된 동작과 CSS 스타일을 가질 수 있습니다. 웹 구성 요소의 일부이지만 자체적으로 사용할 수도 있습니다.

2. HTML 템플릿 : HTML 템플릿 요소 <template>는 페이지가로드 될 때 렌더링 할 것이 아니라, 이후에 자바 스크립트를 사용하여 런타임시 인스턴스화 할 수 클라이언트 측 함량을 유지하는 메커니즘입니다. 템플릿은 나중에 문서에서 사용하기 위해 저장되는 내용 조각으로 생각하십시오.

3. 그림자 DOM : 웹 구성 요소의 JavaScript, CSS 및 템플릿에 캡슐화를 제공합니다. 그림자 DOM은 이러한 것들이 주 문서의 DOM과 분리되어 유지되도록합니다. 또한 웹 구성 요소 외부에서 자체적으로 그림자 DOM을 사용할 수도 있습니다.

4. HTML 가져 오기 : 웹 구성 요소의 패키징 메커니즘을위한 것이지만 HTML 가져 오기 기능을 단독으로 사용할 수도 있습니다. HTML 문서에서 <link> 태그를 사용하여 HTML 파일을 가져옵니다. ,

5. 이
   • 폴리머 (전 4 개 기술을 사용),
   • X-태그는 (전용 사용자 정의 요소를 사용)과 보손은 (오직 정의를 사용하여 여기에

세 개의 웹 구성 요소 라이브러리입니다 요소, 자체적으로 하위 수준 UI 요소의 라이브러리라고 함).

나는 또한 관심을 가질 수있는이 사이트 발견 : Web Components.org 논의하고 웹 구성 요소 모범 사례를