怎么在Shadow DOM/Web组件中覆盖CSS

这篇文章主要介绍"怎么在Shadow DOM/Web组件中覆盖CSS"，在日常操作中，相信很多人在怎么在Shadow DOM/Web组件中覆盖CSS问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"怎么在Shadow DOM/Web组件中覆盖CSS"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创建一个HTML元素

我们将使用扩展基本HTML Element的JavaScript类创建自定义HTML元素。然后，我们将使用要创建的标签名称和刚刚创建的类调用 customElements.define()。

class AppCard extends HTMLElement {...} window.customElements.define('app-card', AppCard);

在此示例中，我们将创建此简单的Material Design卡片，当我们在HTML上添加此元素时将显示该元素： 。

首先，我们创建Shadow DOM root，然后将HTML和CSS字符串分配给Shadow DOM root 的 innerHTML，如下所示。

class AppCard extends HTMLElement {   constructor() {     super();     const shadowRoot = this.attachShadow({mode: 'open'});         shadowRoot[xss_clean] = `              
         
Card title
       
     `;   }}window.customElements.define('app-card', AppCard);

覆盖尝试

在此示例中，我们要修改卡的背景颜色。如果它是HTML中的简单 div 元素，则可以覆盖 card 类或通过CSS选择器访问 div 元素。但是，以下尝试将无效：

// access the div  app-card > div {   background-color: #2196F3; } // override card class app-card > .card {   background-color: #2196F3; }

使用CSS自定义属性

为了解决这个问题，我们可以使用CSS自定义属性(CSS变量)。可以使用CSS中定义的CSS自定义属性来更改自定义元素中的某些CSS属性。

按照我们的例子，我们将使用属性 background-color 上的变量 card-bg 来获取谁在使用自定义元素所定义的颜色。

class AppCard extends HTMLElement {   constructor() {     super();     const shadowRoot = this.attachShadow({mode: 'open'});         shadowRoot[xss_clean] = `              
         
Card title
       
     `;   }}window.customElements.define('app-card', AppCard);

现在，我们将使用 app-card 自定义元素，并在Body元素的CSS中创建 card-bg 变量，我们将十六进制颜色 #2196F3 分配给变量。

到此，关于"怎么在Shadow DOM/Web组件中覆盖CSS"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！