css3用在目标元素的事件,Shadow Dom和CSS3：目标选择器

我应该首先说我不想努力工作 . 关于Shadow Dom和CSS3 :target 选择器如何/应该/当前一起工作，我只是有一个有趣的想法 .

我知道HTML规范说在有效的HTML文档中应该只有一个具有特定ID值的元素 . 但是当我们开始使用带阴影dom的web组件时，我们很容易发现自己使用具有相同ID的多个元素 . 当我们在同一页面中多次使用相同的组件时尤其如此 . 所以我的问题是：阴影dom区域内的元素应该发生什么，其ID值与当前哈希匹配，并且使用 :target 规则设置样式？

例如，如果我写了一个包含的webcomponent(my-element)

#debug {display:none}

#debug:target { display:block; background-color:yellow; border 2px solid red; }

some debug data

我放在页面上并导航到#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规范 .

只是好奇，如果有人能够回答这应该如何工作以及今天如何运作......

(从我的电脑编辑添加格式...我的手机很难做到)