WebComponents-在组件公共界面中使用CSS自定义属性有什么优势？

如何解决WebComponents-在组件公共界面中使用CSS自定义属性有什么优势？

WebComponent可以在其封装样式中包含 CSS自定义属性。

这为组件的使用者提供了一种自定义组件样式的方式：

• 请参阅：Creating style hooks using CSS custom properties | Google Web Fundamentals

声明

--fancy-tabs-bg: red

主要样式中的表示当shadow-root样式包括时

background-color: var(--fancy-tabs-bg,#9E9E9E)

background-color将为red（或将--fancy-tabs-bg设置为任何值）。

---

但是... 我在同一篇文章中指出它明确指出：

与:host相关的一个陷阱是父页面中的规则具有更高的规则 比元素中定义的:host规则更具特异性。那是， 外部风格取胜。这使用户可以覆盖您的顶层 从外部造型。

再说一遍，

外部样式始终胜过阴影DOM中定义的样式。例如，如果用户编写选择器fancy-tabs { width: 500px; }，它将胜过组件规则：:host { width: 650px;} >

所以...我们不必为--fancy-tabs-bg声明值，而只需...为background-color（？）设置值

真的吗？让我们找出答案。

这是一个WebComponent（主要从上面引用的文章中复制），其中该组件的前两个实例是使用 CSS自定义属性（即--fancy-tabs-bg）设置样式的然后使用相关的 CSS属性（即background-color）直接为第三个实例设置样式。

class FancyTabs extends HTMLElement {
  
  constructor() {
    super();
    this.root = this.attachShadow({mode: "open"});
  }

  connectedCallback() {
  
    this.root.innerHTML = `
    
    <style>
      :host {
        display: block;
        width: 100px;
        height: 100px;
        margin: 6px;
        border-radius: 10px;
      }
      
      :host([background]) {
        background-color: var(--fancy-tabs-bg,#9E9E9E);
      }
    </style>
    
    `;
  }
}

customElements.define('fancy-tabs',FancyTabs);

fancy-tabs {
  float: left;
}

fancy-tabs:nth-of-type(1) {
  --fancy-tabs-bg: red;
}

fancy-tabs:nth-of-type(2) {
  --fancy-tabs-bg: orange;
}

fancy-tabs:nth-of-type(3) {
  background-color: green;
}

<fancy-tabs background>...</fancy-tabs>
<fancy-tabs background>...</fancy-tabs>
<fancy-tabs background>...</fancy-tabs>

没有区别，是吗？

那为什么要完全使用 CSS自定义属性？为什么要在公共界面中突出显示特定的CSS属性可用于用户自定义？当然所有 CSS属性都可以用于用户自定义，不是吗？

我想念什么？

解决方法

在处理host元素时，您不会注意到任何区别，但是当内部包含更多元素时，您可以清楚地看到CSS变量的使用：

CSS变量可用于更新嵌套元素样式的示例。我怀疑您会发现没有CSS变量的更好方法。

class FancyTabs extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'closed' });
    const css = `
     :host {
        display: block;
        width: 100px;
        height: 100px;
        margin: 6px;
        border-radius: 10px;
      }
      
     :host([background]) {
        background-color: var(--fancy-tabs-bg,#9E9E9E);
      }
      div {
        padding: var(--p,0px);
        border:var(--b,0px) solid;
      }`
    this.styles = document.createElement('style');
    this.styles.innerHTML = css;
  }
  connectedCallback() {
    const div = document.createElement('div');
    div.innerHTML = this.innerHTML;
    this.shadow.appendChild(this.styles);
    this.shadow.appendChild(div);
  }
}

customElements.define('fancy-tabs',FancyTabs);

fancy-tabs {
  float: left;
}

fancy-tabs:nth-of-type(1) {
  --fancy-tabs-bg: red;
  --p:20px;
  --b:5px;
}

fancy-tabs:nth-of-type(2) {
  --fancy-tabs-bg: orange;
  --p:10px;
  --b:3px;
}
fancy-tabs:nth-of-type(3) {
  --fancy-tabs-bg: orange;
  padding:20px; /* will get applied to host*/
  border-width:5px; /* will do nothing */
}

<fancy-tabs background>text  here</fancy-tabs>
<fancy-tabs background>text  here</fancy-tabs>
<fancy-tabs background>text  here</fancy-tabs>