我应该首先说我不想努力工作 . 关于Shadow Dom和CSS3 :target 选择器如何/应该/当前一起工作，我只是有一个有趣的想法 .
我知道HTML规范说在有效的HTML文档中应该只有一个具有特定ID值的元素 . 但是当我们开始使用带阴影dom的web组件时，我们很容易发现自己使用具有相同ID的多个元素 . 当我们在同一页面中多次使用相同的组件时尤其如此 . 所以我的问题是：阴影dom区域内的元素应该发生什么，其ID值与当前哈希匹配，并且使用 :target 规则设置样式？
例如，如果我写了一个包含的webcomponent（my-element）
<style>
#debug {display:none}
#debug:target { display:block; background-color:yellow; border 2px solid red; }
</style>
<div id="debug">some debug data</div>
我放在页面上并导航到#debug的my-element实例应该怎么办？每个组件中的调试元素是否应该显示？他们都不应该表现出来吗？应该只显示第一个元素的调试div（我期望浏览器尝试导航到的那个）？
我的观点是，如果页面没有 ID=debug 值的元素，则页面上不应出现滚动导航 . 由于阴影dom与页面的其余部分隔离，因此尝试导航到嵌套在阴影dom中的此类元素 . 每个my-element实例应该能够看到当前页面's URL though and should apply any matching :target rules, such that each my-elements' debug div应该是可见的 .
如果是这种情况，它将为在所有组件之间共享页面状态提供一些有趣的可能性，例如上面的调试示例 . 但是，我怀疑Chrome目前是如何实现的 . 而且我很确定这个Shadow Dom polyfill不会正确处理事情，因为它基本上会把所有东西都塞进页面的Dom树中，这会打破html规范 .
只是好奇，如果有人能够回答这应该如何工作以及今天如何运作......
（从我的电脑编辑添加格式...我的手机很难做到）
1 回答
我认为您可以将阴影DOM看作嵌套文档 . CSS无法从外部处理影子DOM内的元素（以前存在的影子穿孔CSS选择器已弃用） . 这也封装了id，因此包含id的元素的多个组件不会导致冲突或重复 .
如果在组件样式中有
:target选择器的CSS，它应该能够使用匹配的id来寻址元素，否则它不应该 .