为什么我不能在 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 {
}

以针对CCD_ 4内部的CCD_。我必须使用像div.custom-contents这样的包装器来定位中的元素。

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

Answer 1

对于自定义元素，名称必须至少由一个字母组成，后面跟着一个-短划线，然后是至少一个其他字母如果您不符合该要求，您的web组件将无法工作

您的组件使用shadow DOM。外部样式不会影响shadow DOM(继承除外(，shadow DOM中的样式也不会影响组件外部的元素。这是shadow DOM背后的主要概念-组件带来了它们的样式，并且不会影响它们所使用的页面上的其他元素

此外，您不应该在connectedCallback中附加shadow DOM。这应该始终在constructor中完成。

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