Javascript ：目标css选择器在聚合物中不工作

我正在使用Polymer，我注意到

：target

css选择器不起作用

比如说

<polymer-element name="my-element" noscript>
    <template>
        <style>
            :target {
                border: 2px solid red;
            }
        </style>
        <div id="test">This is a :target test</div>
    </template>
</polymer-element>

<a href="#test">Click me</a>
<my-element></my-element>

：目标{
边框：2倍纯红；
}
这是一个：目标测试

---

有什么建议可以解决这个问题吗？

我认为链接到shadow dom中的元素不是一个好主意，因为在同一页面中可能有多个外部元素的实例，所以会得到多个id相同的元素

但是，当您请求带有

#elementId

的url时，浏览器将仅在光dom中查找相应的元素

如果仍然需要设置阴影dom元素的样式，可以模拟

：target

选择器：

<polymer-element name="my-element" constructor="" attributes="">
  <template>
    <style>
      #inner[target] {
        border: 2px solid red;
      }
    </style>
    <content>Hello World!</content>
    <div id="inner" target?="{{innerTargetted}}">This is a :target test</div>
  </template>
  <script>
    Polymer('my-element', {
      ready: function() {
        $(window).on('hashchange', function() {
          this.innerTargetted = window.location.hash == '#inner';
        }.bind(this));
      }
    });
  </script>
</polymer-element>

#内部[目标]{
边框：2倍纯红；
}
你好，世界！
这是一个：目标测试
聚合物（“my-element”{
就绪：函数（）{
$（window）.on（'hashchange'，function（））{
this.innerTargeted=window.location.hash=='#inner'；
}.约束（这个）；
}
});

---

.

我认为链接到shadow dom中的元素不是一个好主意，因为您可能在同一页面中有多个外部元素的实例，所以您将获得具有相同id的多个元素

但是，当您请求带有

#elementId

的url时，浏览器将仅在光dom中查找相应的元素

如果仍然需要设置阴影dom元素的样式，可以模拟

：target

选择器：

<polymer-element name="my-element" constructor="" attributes="">
  <template>
    <style>
      #inner[target] {
        border: 2px solid red;
      }
    </style>
    <content>Hello World!</content>
    <div id="inner" target?="{{innerTargetted}}">This is a :target test</div>
  </template>
  <script>
    Polymer('my-element', {
      ready: function() {
        $(window).on('hashchange', function() {
          this.innerTargetted = window.location.hash == '#inner';
        }.bind(this));
      }
    });
  </script>
</polymer-element>

#内部[目标]{
边框：2倍纯红；
}
你好，世界！
这是一个：目标测试
聚合物（“my-element”{
就绪：函数（）{
$（window）.on（'hashchange'，function（））{
this.innerTargeted=window.location.hash=='#inner'；
}.约束（这个）；
}
});

---

.

我认为链接到shadow dom中的元素不是一个好主意，因为您可能在同一页面中有多个外部元素的实例，所以您将获得具有相同id的多个元素

但是，当您请求带有

#elementId

的url时，浏览器将仅在光dom中查找相应的元素

如果仍然需要设置阴影dom元素的样式，可以模拟

：target

选择器：

<polymer-element name="my-element" constructor="" attributes="">
  <template>
    <style>
      #inner[target] {
        border: 2px solid red;
      }
    </style>
    <content>Hello World!</content>
    <div id="inner" target?="{{innerTargetted}}">This is a :target test</div>
  </template>
  <script>
    Polymer('my-element', {
      ready: function() {
        $(window).on('hashchange', function() {
          this.innerTargetted = window.location.hash == '#inner';
        }.bind(this));
      }
    });
  </script>
</polymer-element>

#内部[目标]{
边框：2倍纯红；
}
你好，世界！
这是一个：目标测试
聚合物（“my-element”{
就绪：函数（）{
$（window）.on（'hashchange'，function（））{
this.innerTargeted=window.location.hash=='#inner'；
}.约束（这个）；
}
});

---

.

我认为链接到shadow dom中的元素不是一个好主意，因为您可能在同一页面中有多个外部元素的实例，所以您将获得具有相同id的多个元素

但是，当您请求带有

#elementId

的url时，浏览器将仅在光dom中查找相应的元素

如果仍然需要设置阴影dom元素的样式，可以模拟

：target

选择器：

<polymer-element name="my-element" constructor="" attributes="">
  <template>
    <style>
      #inner[target] {
        border: 2px solid red;
      }
    </style>
    <content>Hello World!</content>
    <div id="inner" target?="{{innerTargetted}}">This is a :target test</div>
  </template>
  <script>
    Polymer('my-element', {
      ready: function() {
        $(window).on('hashchange', function() {
          this.innerTargetted = window.location.hash == '#inner';
        }.bind(this));
      }
    });
  </script>
</polymer-element>

#内部[目标]{
边框：2倍纯红；
}
你好，世界！
这是一个：目标测试
聚合物（“my-element”{
就绪：函数（）{
$（window）.on（'hashchange'，function（））{
this.innerTargeted=window.location.hash=='#inner'；
}.约束（这个）；
}
});

---

.

我必须承认：我不太熟悉shadow DOM，也绝对不熟悉Polymer，但我想告诉你我对这一点的看法，因为我觉得你的意图有点奇怪，而且评论时间太长了

短 不能在卷影主机内使用伪选择器

：target

---

长的 不幸的是，我无法在这些资源中找到明确的证据

但是有一些提示

Web组件的目标是让我们能够构建单个和独立的组件，这些组件可以在文档中使用，而不必考虑其内部功能或样式

如果组件可以直接到达“外部”文档，或者外部文档可以直接到达任何影子主机元素，那么这将完全违背Web组件的意图

想象一下，如果插入两个

实例，会发生什么情况。两者都包含相同的ID，应该针对哪一个

当然，可以从卷影文档中访问卷影文档或包含的文档，但只能分别通过

：：shadow

或

：host

对我来说，浏览器不能仅仅使用

：target

选择器来选择元素是合乎逻辑的，因为目标是文档的问题（它的URL指向某个ID），而不是任何影子DOM。也不可能从容器文档中使用

document.getElementById（）

访问阴影树节点

还涉及阴影DOM概念的说明如下：

为什么阴影宿主如此怪异

阴影主机位于阴影树之外，其标记位于阴影树中 控制页面作者，而不是组件作者。

如果一个组件使用了一个特定的类名，那就不太好了 在阴影树内部，以及使用该组件的页面作者 意外地还使用了相同的类名并将其放在主机上 元素。这种情况会导致意外的样式，即 组件作者无法预测，并且会使 要调试的页面作者

（）

我认为这是另一个证据：阴影主机（从外部查看）本身将保持活动（焦点）状态，同时在其树内处理焦点

为了保持封装，文档对象的焦点的值 必须调整API属性activeElement