Javascript 聚合物-分布式节点是否设置样式，然后进行分布式？

假设我有两个自定义元素，定义为聚合元素的扩展：

• c-el1
• c-el2

模板如下：

c-el1

p{
颜色：红色；
}
自定义文本

c-el2

p：：开槽（*）{
颜色：绿色；
}

是否应将带有自定义文本的

p

呈现为绿色？还是红色

---

到目前为止，自定义元素c-el1使用自定义文本设置

p

的样式，该文本在c-el2

中开槽将呈现红色，因为

c-el1

中的样式将覆盖

c-el2

中的样式

如果未在

c-el1

中设置

的样式，则在

c-el2

中选择开槽元素的正确方法是：

<dom-module id="custom-el2">
  <template>
    <style>
      :host ::slotted(p) {
        color: green;
      }
    </style>
    <slot></slot>
  </template>
  <script>
    class CustomEl2 extends Polymer.Element {
      static get is() { return 'custom-el2'; }
    }
    window.customElements.define(CustomEl2.is, CustomEl2);
  </script>
</dom-module>

：主机：：时隙（p）{
颜色：绿色；
}
类CustomEl2扩展了Polymer.Element{
静态get是（）{return'custom-el2'；}
}
window.customElements.define（CustomEl2.is，CustomEl2）；

聚合物的更多信息请点击这里：

是<代码>在聚合物元素中，仅呈现

• 预先布置好的
• 预先设计的内容

仅仅因为DOM占用了自定义元素的插槽，并不意味着该元素可以按优先级设置样式

我们可能在元素上有一个

：：slotted

规则，但是在自定义元素上使用所述slot的任何父元素/页面，都会获得优先权来设置它放置在所述slot中的DOM的样式

参考文献

---

理想情况下，应在站点上的“设置分布式节点的样式”下以响亮清晰的方式记录这一点，如注释所示

如果我没有在c-el1中设置p的样式，则在有或没有

：host

选择器的情况下应用开槽样式。思考是否会发生这种覆盖，这是意料之中的。干杯正确，如果

c-el1

没有

p

的样式，则开槽样式应适用于这两种情况。重写应该发生在父元素中，因为它使您能够在不编辑源的情况下设置子元素的样式。

<dom-module id="c-el2">
    <template>
        <style>
            p::slotted(*){
               color:green;
             }
        </style>
       <p> <slot></slot></p>
    </template>
</dom-module>

<dom-module id="custom-el2">
  <template>
    <style>
      :host ::slotted(p) {
        color: green;
      }
    </style>
    <slot></slot>
  </template>
  <script>
    class CustomEl2 extends Polymer.Element {
      static get is() { return 'custom-el2'; }
    }
    window.customElements.define(CustomEl2.is, CustomEl2);
  </script>
</dom-module>