0

在我的 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 {

}

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

这是一个已知的限制，也许@import是像这样的 s，一般的自定义元素，还是我做错了什么？

4

1 回答 1

2

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

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

此外，您不应该在connectedCallback. 这应该始终在constructor.

您可以将part属性与::part伪元素一起使用，以允许从外部进行样式设置。

于 2022-01-24T02:09:44.137 回答