在前端开发中，我们经常需要创建自定义元素以实现更好的可重用性和组合性。Custom Elements API 是一种标准化的方式，可以让我们创建自定义元素。但是，在使用 Custom Elements 的过程中，经常会遇到元素内部 CSS 不起作用的问题。这篇文章将介绍为什么会出现这种情况以及如何解决它。
为什么会出现元素内部 CSS 不起作用的问题？
在传统的 HTML 开发中，我们可以将 CSS 样式放在 <style> 标签或外部的 CSS 文件中，然后通过 class 或 id 属性将样式应用到元素上。但是，在自定义元素中，CSS 样式不会像传统的元素一样应用到元素上。这是因为 Custom Elements API 将自定义元素封装在一个 Shadow DOM 中。
Shadow DOM 是一个独立的 DOM 树，与主文档 DOM 树分隔开来，可以为自定义元素提供隔离和保护。在 Shadow DOM 中，有自己的样式和行为。因此，当我们的元素被包含在 Shadow DOM 中时，元素的 CSS 样式只会应用到 Shadow DOM 中，不会影响到主文档的样式。
如何在自定义元素中正确应用样式？
为了解决元素内部 CSS 不起作用的问题，我们可以使用以下方法：
1. 使用:host选择器
:host 选择器是一个 Shadow DOM 中的特殊选择器，表示自定义元素本身。我们可以使用 :host 选择器将样式应用到自定义元素上。
<template id="my-element">
<style>
:host {
background-color: red;
}
</style>
<p>Hello, World!</p>
</template>在上面的例子中，我们将 background-color 样式应用到了自定义元素上。
2. 使用:host-context选择器
:host-context 选择器也是一个 Shadow DOM 中的特殊选择器，可以匹配自定义元素的包含节点中的 CSS 规则。这个特性使我们可以根据包含节点的选择器来修改元素的样式。
<template id="my-element">
<style>
:host-context(.dark-theme) p {
color: white;
}
</style>
<p>Hello, World!</p>
</template>在上面的例子中，我们使用 :host-context 选择器匹配了包含 .dark-theme 类的节点，并将 color 样式应用到了自定义元素的子节点上。
3. 将 CSS 样式提取到外部文件中
我们也可以将 CSS 样式提取到外部的 CSS 文件中，并通过 link 标签将其与自定义元素关联起来。这种方法和传统的 HTML 开发中一样。
<template id="my-element"> <link rel="stylesheet" href="my-element.css"> <p>Hello, World!</p> </template>
在上面的例子中，我们将 CSS 样式提取到了 my-element.css 中，并通过 link 标签将其与自定义元素关联起来。这样，样式就可以在 Shadow DOM 中应用到自定义元素了。
总结
在本文中，我们介绍了为什么自定义元素的 CSS 样式不起作用以及如何解决这个问题。我们可以使用:host 或 :host-context 选择器将样式应用到自定义元素上，也可以将 CSS 样式提取到外部文件中。了解如何在自定义元素中正确应用样式是构建可重用和灵活的自定义元素的重要一步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487f82648841e989467e182