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，它应该支持这个......

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

编辑：
This article表示可以从外部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。

中的功能示例

Answer 2

一个简单的解决方案是在Shadow DOM中定义x类：

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

<element-el></element-el>

注意：由于Shadow DOM的样式封装，无论是否使用Romulo {{}，始终需要将<style>元素放入Shadow DOM中。 1}}解决方案，直接类声明（见上文）或external stylesheet。

当然，如果你使用一个继承的CSS属性（如:host），它将适用于你所有的影子DOM内容，你可以使用普通的CSS：

color

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

element-el {
    color: red;
}

Answer 3

如果element-el在shadow-dom中，则以下css选择器应该帮助你：

<parent Element of shadow-root> /deep/ element-el span {
    color:red;
}

选择包含shadow-dom的元素，然后选择/ deep / all子元素，然后选择span元素。

/ deep /不是HTML标准，但在Chrome和Firefox中应该可以使用。

Answer 4

这可能会帮助处于类似情况的其他人。

就我而言，我有：

<svg class="icon">
    <use xlink:href="#my-icon"></use>
</svg>

并访问＃shadow-root中的渲染图标，我使用：

.icon use {
  fill: #f80;
}

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

4 个答案: