내가 먼저 작업해야하는 문제가 없다고 말하는 것으로 시작해야합니다. 섀도우 돔과 CSS3 :target 셀렉터가 어떻게 함께 작동해야하는지에 대해 흥미로운 생각을했습니다.섀도우 돔과 CSS3 : 타겟 선택자
HTML 사양에는 올바른 HTML 문서에 특정 ID 값이있는 요소가 하나만 있어야한다고 나와 있습니다. 그러나 그림자 돔이있는 웹 컴포넌트를 사용할 때 동일한 ID를 가진 여러 요소를 사용하여 쉽게 찾을 수 있습니다. 동일한 페이지에서 동일한 구성 요소를 여러 번 사용할 때 특히 그렇습니다. 그래서 내가 가진 질문은 다음과 같습니다. 현재 해시와 일치하는 ID 값을 가지고 있으며 :target 규칙으로 스타일이 지정된 그림자 DOM 영역 내부의 요소는 어떻게되어야합니까? 예를 들어
, 나는 webcomponent 내가 한 페이지에 넣고에 # 디버그하는 탐색 내 요소의 모든 인스턴스에 어떻게해야합니까
<style>
#debug {display:none}
#debug:target { display:block; background-color:yellow; border 2px solid red; }
</style>
<div id="debug">some debug data</div>
을 포함 (내 요소)를 썼다면? 각 구성 요소의 디버그 요소가 표시되어야합니까? 그들 중 누구도 보여줄 수 없어야합니까? 첫 번째 요소의 디버그 div 만 표시해야합니까? (브라우저에서 시도하고 탐색 할 것으로 예상되는 것과 동일한 것)?
내 의견으로는 페이지에 ID=debug 값을 가진 요소가 없으면 페이지에 스크롤링 내비게이션이 나타나지 않아야한다는 것입니다. 그림자 DOM은 페이지 스타일의 나머지 부분과 분리되어 있으므로 브라우저는 그림자 DOM에 중첩 된 요소를 탐색해서는 안됩니다. 각 요소 인스턴스는 현재 페이지의 URL을 볼 수 있어야하며 모든 my 요소의 디버그 div가 표시되도록 일치 규칙 : 대상 규칙을 적용해야합니다.
위와 같은 경우 디버그 예제와 같이 모든 구성 요소에서 페이지 상태를 공유하는 데 흥미로운 가능성이 있습니다. 그러나, 나는 그것이 크롬이 현재 사물을 구현하는 방법이라고 생각하지 않습니다. 그리고이 그림자 돔 폴리 폴리은 기본적으로 모든 것을 페이지의 돔 트리에 넣고 html 사양을 깨뜨리기 때문에 정상적으로 처리하지 않을 것이라고 확신합니다. 사람이 작동하는 방법에 대한 답변을 가지고 있으며, 오늘날 어떻게 작동하는지 ...
이