相关疑难解决方法(0)

在查看Polymer时,我在Chrome 37的开发人员工具的样式选项卡中看到以下CSS选择器:

我还看到了一个带有伪选择器的选择器::shadow.

那么,是什么做的/deep/和::shadowCSS选择呢？

CSS::slotted选择器选择<slot>元素的子元素。

但是，当尝试选择像 with ::slotted(*), ::slotted(*) *, or那样的孙子时，选择::slotted(* *)器似乎没有生效。

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      <style>
        ::slotted(*) {
          display: block;
          border: solid blue 1px;
          padding: 3px;
        }
        ::slotted(*) span {
          display: block;
          border: solid red 1px;
          padding: 3px;
        }
        ::slotted(* span) {
          display: block;
          border: solid green 1px;
          padding: 3px;
        }
      </style>
      <slot></slot>
    `;
  }
}
customElements.define('my-element', MyElement);

<my-element>
  <p>
    <span>Test</span>
  </p>
</my-element> …

Shadow DOM 1.0版将完全替换<content>标签<slot>.网上有一些例子,我找不到相关的讨论来证明这一改变是正确的.

有什么问题<content>,哪个<slot>会解决？毕竟新设计完全不同.

从文档中可以看出,该<content>元素支持一个select通过简单选择器过滤节点的属性.

那么针对某个内容元素的light dom元素是否应该包含一个css类标签/标签/值,允许浏览器将其映射到在select属性中设置了css标签/标签/值的相应内容元素？是否包含light dom元素,没有这样的标签映射到<content>没有select属性的元素？枚举可能性的一个例子将非常有用.

据我所知，不推荐使用 /deep 选择器来选择影子 dom 子项。所以我正在寻找另一种解决方案。

CSS 作用域旨在为升序选择器提供解决方案，但不为降序选择器提供解决方案。

鉴于这个 dom ：

<script>
    $('.child').addClass('reached');
</script>
<div id="parent">
    #shadow-root
        <div class="child"></div>
    /shadow-root
</div>

如何在脚本中编写选择器以到达 .child 元素？

感谢您的帮助