如何通过JavaScript创建一个CSS作用域，以防止CSS对页面的另一部分产生影响？

通过JavaScript创建CSS作用域的一种常见方法是使用Shadow DOM（影子DOM）。Shadow DOM 是一种将DOM树和CSS样式封装在一个独立的作用域中的技术，它可以防止CSS样式影响到页面的其他部分。

要通过JavaScript创建一个CSS作用域，可以按照以下步骤：

创建一个HTML元素，作为Shadow DOM的宿主元素。例如，可以使用<div>元素作为宿主元素。
使用宿主元素的attachShadow()方法创建一个Shadow DOM。该方法接受一个参数，可以是{mode: 'open'}或{mode: 'closed'}。'open'表示可以通过JavaScript访问Shadow DOM，'closed'表示无法通过JavaScript访问Shadow DOM。
示例代码：
示例代码：
在Shadow DOM中创建一个<style>元素，并将CSS样式规则添加到该元素中。这样，这些样式规则只会应用于Shadow DOM内部的元素，而不会影响到页面的其他部分。
示例代码：
示例代码：
将Shadow DOM的宿主元素插入到页面的适当位置。这样，Shadow DOM内部的元素及其样式规则就会生效。
示例代码：
示例代码：