为什么我不能在 CSS 中定位我自定义的 HTML 元素？

Question

在我的 HTML 中，我有：

<link rel="stylesheet" href="css/styles.css">
<script src="js/components/custom.js"></script> 
...
<custom></custom>

在custom.js，假设我已经定义：

class Custom extends HTMLElement {
  connectedCallback() {
  const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `
      <style>
        @import url('/css/styles.css');
      </style>
      ...
    `
  }
}

customElements.define('custom', Custom)

在styles.css 中，当我定义样式时，它们起作用。但我不能做类似的事情

custom img {

}

以custom 内的img 为目标。我必须使用 div.custom-contents 之类的包装器来定位其中的元素。

这是一个已知的限制，可能是 @imports 这样的自定义元素，还是我做错了什么？

Answer 1

自定义元素的名称必须包含至少一个字母，后跟 - 破折号，然后至少包含一个其他字母。 如果您不符合该要求，您的 Web 组件将无法运行。

您的组件使用影子 DOM。没有任何外部样式会影响 shadow DOM（继承除外），并且 shadow DOM 中的任何样式都不会影响组件之外的元素。这是 shadow DOM 背后的主要概念 - 组件带来它们的样式，并且不影响使用它们的页面上的其他元素。

另外，您不应该在 connectedCallback 中附加影子 DOM。这应该始终在constructor 中完成。

您可以使用part 属性和::part 伪元素来允许从外部进行样式设置。