Web Components 是一种新兴的前端技术，它可以让开发者更加灵活地组织和管理页面上的元素。在 Web Components 中，我们可以使用 Shadow DOM 来实现样式的隔离，防止组件的样式影响到其他元素。但是，如果我们想要使用外部的 CSS 文件来渲染组件，该怎么做呢？本文将介绍一些技巧，帮助你在 Web Components 中调用外部 CSS 文件。
使用 link 标签
在 Web Components 的 Shadow DOM 中，我们可以使用 link 标签来引入外部的 CSS 文件。具体步骤如下：
- 在组件的模板中，添加一个 link 标签，例如：
<template>
<link rel="stylesheet" href="path/to/external.css">
<div class="my-component">
...
</div>
</template>- 在组件的 JavaScript 中，使用 Shadow DOM 的 API 将模板内容插入到 Shadow DOM 中，例如：
// javascriptcn.com 代码示例
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const template = document.querySelector('template');
const instance = template.content.cloneNode(true);
shadow.appendChild(instance);
}
}
customElements.define('my-component', MyComponent);这样，我们就可以在 Web Components 中使用外部的 CSS 文件了。但是，如果我们在组件中使用了一些自定义的样式类，该怎么办呢？这就需要我们了解 Shadow DOM 的一些特性。
使用 ::slotted 伪类
在 Web Components 的 Shadow DOM 中，我们可以使用 ::slotted 伪类来选择组件模板中的插槽内容。例如：
<template>
<link rel="stylesheet" href="path/to/external.css">
<div class="my-component">
<slot></slot>
</div>
</template>这里，我们在组件中定义了一个插槽，用于接收外部传入的内容。在外部使用组件时，可以将内容插入到插槽中，例如：
<my-component> <p class="my-text">Hello, world!</p> </my-component>
这里，我们在组件中插入了一个带有自定义样式类的段落元素。但是，如果我们直接在外部的 CSS 文件中定义 .my-text 样式，它并不会被应用到组件中的元素上。这是因为，在 Shadow DOM 中，插槽内容和组件模板是相互独立的，它们之间没有样式的继承关系。
为了解决这个问题，我们可以使用 ::slotted 伪类来选择插槽内容中的元素，并为它们添加样式。例如：
my-component ::slotted(.my-text) {
color: red;
}这里，我们使用了 my-component ::slotted(.my-text) 的选择器，来选择组件中所有带有 .my-text 样式类的插槽内容。这样，我们就可以在 Web Components 中使用外部的 CSS 文件，并且为插槽内容添加自定义样式了。
总结
在 Web Components 中调用外部 CSS 文件，可以帮助我们更加灵活地组织和管理页面上的元素。通过使用 link 标签和 ::slotted 伪类，我们可以轻松地引入外部的 CSS 文件，并为插槽内容添加自定义样式。这些技巧不仅有深度和学习意义，还可以指导我们更好地使用 Web Components 技术来开发前端应用。
示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Components Demo</title>
</head>
<body>
<my-component>
<p class="my-text">Hello, world!</p>
</my-component>
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const template = document.querySelector('template');
const instance = template.content.cloneNode(true);
shadow.appendChild(instance);
}
}
customElements.define('my-component', MyComponent);
</script>
<template>
<link rel="stylesheet" href="path/to/external.css">
<div class="my-component">
<slot></slot>
</div>
</template>
</body>
</html>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c87a6d2f5e1655d4e4d93