如何在自定义元素中提供后备 CSS 值？

Question

我有一个自定义的网络组件，它基本上是一个 SVG 图标：

<custom-icon>
    <svg>{svg-stuff}</svg>
</custom-icon>

我希望能够通过像这样应用 CSS 来改变它的大小：

custom-icon {
    width: 20px;
}

但我也希望在未应用 CSS 时有一个后备默认值。但是，当我内联一些 CSS，如 <custom-icon style="width:15px"> 时，它只会覆盖我之后应用的所有 CSS。如果没有自定义 CSS，如何才能让默认的“15px”仅适用？

MWE：

class CustomIcon extends HTMLElement {
  constructor() {
    super();
    
    let size = "100px"
    
    this.style.height = size;
    this.style.width = size;
    
    this.style.background = "firebrick"
    this.style.display = "block"
  }
}

window.customElements.define('custom-icon', CustomIcon);

custom-icon {
  --icon-size: 50px;
  height: var(--icon-size);
  width: var(--icon-size);
}

<custom-icon />

Answer 1

如果您的自定义元素的内容被封装在 Shadow DOM 中，这是推荐的做法，您可以使用 :host 伪类来定义默认样式。

然后，如果您为自定义元素定义一种全局样式，它将覆盖使用:host 定义的样式。

customElements.define( 'custom-icon', class extends HTMLElement {
  constructor() {
    super()
    let size = 100
    this.attachShadow( { mode: 'open' } )
        .innerHTML = `
          <style>
            :host {
               display: inline-block ;
               height: ${size}px ;
               width: ${size}px ;
               background-color: firebrick ; 
               color: white;
            }
          </style>
          <slot></slot>`
  }
} )

custom-icon#i1 {
  --icon-size: 50px;
  height: var(--icon-size);
  width: var(--icon-size);
}

<custom-icon id="i1">sized</custom-icon>
<hr>
<custom-icon>default</custom-icon>

Answer 2

订单按照the cascade申请。

通过style 属性应用的CSS 位于级联的底部。实际上，如果您不在回退到样式表时通过属性指定。

所以20px 是您未指定15px 时的后备。

---

您可以使用另一个带有 不太具体 选择器的规则集来编写您的后备 CSS（尽管唯一比单一类型选择器（如 custom-icon）更不具体的是通用选择器（@ 987654326@) 这没有帮助）所以您需要将custom-icon 替换为更多特定的东西。

另一种选择是采用大锤方法并在您的规则集中制定每条规则!important。

---

最好的选择可能是首先解决任何可能导致您的 CSS 丢失的情况。

Answer 3

您可以考虑 data 属性，然后将该属性用作自定义属性的后备。

您可以在下面看到，直到我们删除自定义属性（通过设置initial），尺寸才会生效

class CustomIcon extends HTMLElement {
  constructor() {
    super();
    
    this.style.height = `var(--icon-size, ${this.getAttribute('size')})`;
    this.style.width = `var(--icon-size, ${this.getAttribute('size')})`;
    
    this.style.background = "firebrick"
    this.style.display = "block"
  }
}

window.customElements.define('custom-icon', CustomIcon);

custom-icon {
  --icon-size: 50px;
  margin:5px;
}

<custom-icon size="15px"></custom-icon>
<custom-icon size="25px"></custom-icon>
<custom-icon size="2050px"></custom-icon>


<custom-icon size="200px" style="--icon-size:initial"></custom-icon>

了解initial使用的相关问题：CSS custom properties (variables) for box model

另一个初始未设置自定义属性的示例。

class CustomIcon extends HTMLElement {
  constructor() {
    super();

    this.style.height = `var(--icon-size, ${this.getAttribute('size')})`;
    this.style.width = `var(--icon-size, ${this.getAttribute('size')})`;

    this.style.background = "firebrick"
    this.style.display = "block"
  }
}

window.customElements.define('custom-icon', CustomIcon);

custom-icon {
  margin: 5px;
}

.set {
  --icon-size: 50px;
}

<div class="set">
  <custom-icon size="15px"></custom-icon>
  <custom-icon size="25px"></custom-icon>
  <custom-icon size="2050px"></custom-icon>
</div>

<custom-icon size="200px" ></custom-icon>