웹 컴포넌트, Shadow DOM, Shadow CSS ;tldr

나는 당신이 Web Components로 뛰어들어야 하고 그것이 당신의 프레임워크를 대체할 새롭고 멋진 것이라고 말하지 않을 것입니다.

다음 주제에 대한 질문을 가능한 한 효율적으로 해결하려고 노력하고 있습니다.

웹 구성 요소란 무엇입니까?

Shadow DOM이란 무엇입니까?

슬롯이란 무엇입니까(및 LightDOM이란 무엇입니까)?

Shadow DOM에는 어떤 CSS 선택기가 필요합니까?

1. 웹 구성요소란 무엇입니까?

웹 구성 요소는 customElements.define 인터페이스를 통해 정의되는 모든 것입니다.

Shadow DOM을 사용하든 뭐든 상관없습니다. 사용자 지정 태그에 해당 API를 사용하는 경우 웹 구성 요소를 사용하는 것입니다.

1.1. 웹 구성 요소를 어떻게 사용할 수 있습니까?

<your-tag></your-tag>
<script>
// most simple example of a Web Component:
customElements.define('your-tag', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = 'Hello world!';
  }
}
</script>

그들은 not self-closing이므로하지 마십시오!

1.2. 웹 구성 요소의 수명 주기

웹 구성 요소에서 일반적으로 사용할 수 있는 항목4 of 5 methods이 있습니다.

constructor() 데이터 프리페치 등에 사용

connectedCallback()는 DOM에 마운트될 때 알려줍니다

.

disconnectedCallback()는 DOM에서 마운트 해제될 때 알려줍니다

.

attributeChangedCallback(...) 요소의 속성이 변경되면 알려줍니다.

이것은 static get observedAttributes() {return ['foo', 'bar']; }와 결합되어 어떤 속성을 관찰하고 콜백을 호출할지 알려주는

2. 섀도우 DOM이란 무엇입니까?

customElements.define('your-tag', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = 'Hello Light';
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = 'Hello Darkness';
  }
}

우선 Shadow DOM은 다른 모든 노드와 마찬가지로 DOM 노드입니다.
그러나 Shadow DOM 노드는 querySelector를 통해 찾을 수 없으며 외부에서 querySelector를 통해 내부의 모든 것을 찾을 수 없습니다.
또한 외부 CSS는 적용되지 않습니다.

몇 가지 간단한 설명:

섀도우 DOM...

은 보안 계층이 아닙니다!

JS

범위를 벗어나지 않음

CSS 및 HTML 범위 지정

은 문서에 스타일과 videoplayer lib를 정의한 경우 Shadow DOM 내에서 DOM을 찾지 않으며

내의 어떤 항목에도 스타일을 지정하지 않음을 의미합니다.

2.1. 내 문서에 hello() 메서드가 있는 전역 라이브러리가 있는 경우 Shadow DOM 내부에서 호출할 수 있습니까?

예! 참조: https://codesandbox.io/s/say-hello-qswww?file=/src/index.js
일반 JS 범위에서 웹 구성 요소를 정의합니다.

2.2. 왜 Shadow DOM인가?

여기서 정확히 2개의 답변을 볼 수 있습니다.

CSS/HTML의 격리가 필요합니다

.

슬롯 기능을 사용하려고 함

3. 슬롯이란 무엇이며 Light DOM은 무엇입니까?

3.1. 가벼운 DOM

가벼운 DOM != 일반 DOM. Light DOM은 Shadow DOM에 없는 ShadowDOM-Web-Component의 DOM이라고 합니다.

내live example 를 확인하면 Light DOM 콘텐츠("Hello Light")가 표시되지 않는 것을 볼 수 있습니다. Shadow DOM 콘텐츠가 연결된 웹 구성 요소를 대신하기 때문입니다. 그런 다음 Light DOM은 슬롯을 통해서만 참조할 수 있습니다(다음 섹션).

3.2. 슬롯

Shadow DOM 내부에 <slot><slot>를 배치하고 Light DOM에 콘텐츠가 있는 경우 섹션 3.1에서 "누락된"Light DOM의 콘텐츠입니다. <slot>가 있는 위치에 표시됩니다.

문자 그대로 슬롯 콘텐츠가 슬롯이 있는 정확한 지점에 복사되는 것처럼 작동하는 자리 표시자입니다. 따라서 머리 속으로 생각해보세요. <slot> 태그는 Shadow DOM 외부의 모든 것이 (가상으로) "복사"됩니다.

https://codesandbox.io/s/light-dom-vs-shadow-dom-cmyh9?file=/src/index.js

4. Shadow DOM에는 어떤 CSS 선택기가 필요합니까?

아마도 다음이 필요할 것입니다.

::slotted()

:host()

:host-context()

작동 방식을 이해하는 데 도움이 되는 샌드박스를 만들었습니다(자세한 텍스트 설명이 필요한 경우 댓글에 게시).

https://codesandbox.io/s/gracious-saha-928yt?file=/index.html .

출처

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

https://developer.mozilla.org/en-US/docs/Web/CSS/:host()

https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()