在Shadow DOM中为阴影根创建一个样式

Question

我正在尝试设置阴影DOM根的子元素.
这定义了一个名为的自定义元素element-el,它有一个span名为'x'的字母,其中包含字母x,我想要的,事情状态为红色.

class El extends HTMLElement {
    constructor() {
        super();
        var shadow = this.attachShadow({mode:'open'});
        shadow.innerHTML = '<span class="x">X</span>';
    }
}
customElements.define ('element-el',El);

我试过那些CSS样式:

element-el::slotted(.x) {
  color:red;
}
element-el::host .x {
  color:red;
}
element-el:host .x {
  color:red;
}
element-el::shadow .x {
  color:red;
}
element-el /deep/ .x {
  color: red;
}
element-el::content .x {
  color:red;
}

X不会变红.我正在使用Chrome 56,它应该支持这个......

我想在没有style在shadow DOM中放置元素的情况下设置样式.
这是一个codepen:http://codepen.io/anon/pen/OpRLVG？edit = 1111

编辑:
本文表明,它是可能的风格影儿从外部CSS文件-仅仅因为他们错了吗？

Answer 1

显然，问题在于您正在尝试使用全局 CSS 来设置影子树元素的样式。

您可以使用:host伪选择器，但是为此，您必须将样式放置在影子树内容中。

在您的 JavaScript 中进行以下更改：

class El extends HTMLElement {

    constructor() {
        super();
        var shadow = this.attachShadow({mode:'open'});
        var innerHTML = '';
        innerHTML += '<style>';
        innerHTML += ':host(element-el.red) span {color: red}';
        innerHTML += ':host(element-el.green) span {color: green}';
        innerHTML += ':host(element-el.blue) span {color: blue}';
        innerHTML += '</style>';      
        innerHTML += '<span class="x">X</span>';      
        shadow.innerHTML = innerHTML;
    }

}

customElements.define ('element-el',El);

检查您的updated codepen.