Custom Elements 是 Web Components 的一部分，它们使得我们可以定义自己的 HTML 标签并在任何页面中使用它们。由于它们是自定义元素，因此默认情况下没有任何样式。本文将介绍如何在 Custom Elements 中添加样式。
为 Custom Elements 添加样式的方式
在 Custom Elements 中，在元素内部或将其包含在 shadow DOM 中的前提下，我们可以使用以下方式中的任何一种为元素添加样式：
- 直接在 Custom Element 内部使用 `<style>` 标签。</li> <li>在 Custom Element 的外部使用普通的 CSS。</li> <li>在 Custom Element 内的 shadow DOM 中使用 `<style>` 标签。</li> </ol> <p>下面我们将逐一介绍这些方式。</p> <h3>直接在 Custom Element 内部使用 `<style>` 标签</h3> <p>这种方式是最简单的，我们可以在 Custom Element 自身的内部使用 `<style>` 标签为它添加样式。例如，以下代码片段可以将 Custom Element 的背景颜色更改为红色：</p> <pre class="prettyprint HTML">-- -------------------- ---- ------- ---------------- ------- -------------- - ----------------- ---- - -------- ---- ----- --- -----------------</pre><p>在上述代码中，我们只需将样式添加在 Custom Element 的内部即可。</p> <h3>在 Custom Element 的外部使用普通的 CSS</h3> <p>我们也可以将 Custom Element 添加到 dom 元素后，通过一般的 CSS 为其添加样式。例如，以下代码片段可以将我们的 Custom Element 的背景颜色更改为红色：</p> <pre class="prettyprint login HTML"><custom-element id="my-element"></custom-element></pre><pre class="prettyprint login CSS">#my-element { background-color: red; }</pre><p>值得一提的是，如果我们想同时为多个 Custom Element 应用同样的样式，我们可以将它们添加到同一类中，然后为这一类添加样式。例如：</p> <pre class="prettyprint login HTML"><custom-element class="my-class"></custom-element> <custom-element class="my-class"></custom-element></pre><pre class="prettyprint login CSS">.my-class { background-color: red; }</pre><h3>在 Custom Element 内的 shadow DOM 中使用 `<style>` 标签</h3> <p>如果我们使用了 shadow DOM，那么为 Custom Element 添加样式的方式也相应发生了变化。此时我们需要在 shadow DOM 中使用 `<style>` 标签。以下是一个示例：</p> <pre class="prettyprint HTML">-- -------------------- ---- ------- ---- ------ ---- --- --------- ------------------------- ------- ----- - -------- ------ ----------------- ---- - -------- ---- ---- --- ----------- ---- ------ ------- --- --------------------------------- -------- ----- ------------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- -------- - ----------------------------------------------- --------------------------------------------------------- - - --------------------------------------- --------------- ---------</pre><p>在上述代码中，我们使用了 shadow DOM，将 `<style>` 标签添加到 shadow DOM 的顶部，然后在 `<template>` 标签中定义了元素的内容。注意 `<style>` 标签中使用的是 `::host` 选择器，这是一个由 shadow DOM 引入的新选择器，它允许我们针对 Custom Element 应用样式。</p> <h2>总结</h2> <p>在 Custom Elements 中添加样式有几种不同的方法，根据具体情况我们可以选择不同的方式。我们可以直接在 Custom Element 内部使用 `<style>` 标签，也可以将它们添加到 dom 元素后，通过一般的 CSS 为其添加样式。如果我们使用了 shadow DOM，那么我们需要在 shadow DOM 中使用 `<style>` 标签。根据具体的使用情况，我们应该选择正确的方法来为 Custom Element 添加样式。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/653760797d4982a6ebfde537">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/653760797d4982a6ebfde537">https://www.javascriptcn.com/post/653760797d4982a6ebfde537</a></p> </blockquote>