首页 文章

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

提问于
浏览 次
6

我正在尝试设置阴影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，它应该支持这个......

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

EDIT:
This article建议 it is 可以从外部CSS文件中设置阴影子项的样式 - 它们完全错了吗？

css web-component shadow-dom custom-element

4 回答

  • -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中的功能示例 .

    回复于
  • 0

    一个简单的解决方案是在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 's style encapsulation, you' ll always need 将 <style> 元素放在Shadow DOM中，无论是使用Romulo的 :host 解决方案，直接类声明（见上文）还是external stylesheet .

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

    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;
}

    <element-el></element-el>
    回复于
  • 1

    如果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中应该可以使用 .

    回复于
  • -1

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

    就我而言，我有：

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

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

    .icon use {
  fill: #f80;
}
    回复于

相关问题