2016-10-08 2 views
13

요소에 그림자 DOM을 생성하여 페이지 스타일이 영향을 미치지 않으면 서 Chrome 확장 요소를 표시 할 수 있습니다.개방형 및 폐쇄 형 DOM DOM 캡슐화 모드의 차이점은 무엇입니까?

Element.createShadowRoot에 대한 설명서를 살펴본 결과, 더 이상 사용되지 않아서 Element.attachShadow을 확인했습니다. 캡슐화 모드를 제공해야하지만 다른 모드의 기능에 대해서는 설명하지 않았습니다. 조금은 수색했지만 차이점이 무엇인지 명확히 설명하는 것을 찾을 수 없었습니다.

모드의 차이점과 달성하려는 대상에 대해 어떤 모드를 사용해야합니까?

답변

7

open 모드를 사용하면 HTML 요소의 shadowRoot 속성을 통해 그림자 DOM에 액세스 할 수 있습니다.

closed 모드에서는 수행 할 수 없습니다. shadowRootnull을 반환합니다.

달성하고자하는 두 가지 모드를 모두 사용할 수 있습니다.

여기는 detailed explanation of the differences입니다.

+0

Chrome 확장 프로그램이 닫힌 그림자 DOM을 "열거 나"조작 할 수있는 방법이 있습니까? – Pacerier

+0

@Pacerier 폐쇄 모드는이를 수행 할 수 없기 때문에 아니오입니다. – Supersharp

+0

그렇다면 구성 요소에 전체 페이지를 포함시킨 다음 사용자 확장 프로그램에서 아무 것도하지 못하게 할 수 있습니까? –

1

허용되는 답변에 추가하십시오. Shadow DOM의 닫힌 모드는 Web Component 작성자에게 구성 요소의 Shadow Root를 노출하는 방법을 결정하는 유연성을 제공하는 단일 이점을 제공합니다. 그러나 구성 요소 작성자가 섀도우 루트를 숨기는 데 드는 노력을 피할 수 없으므로 귀찮은 일은 없을 것입니다. 자세한 설명은 See Open vs. Closed Shadow DOM을 참조하십시오.