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

发布时间:2021-10-26 17:28:11 作者:iii
来源:亿速云 阅读:236

这篇文章主要介绍“怎么在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上添加此元素时将显示该元素:<app-card></ app-card> 。

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

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

class AppCard extends HTMLElement {   constructor() {     super();     const shadowRoot = this.attachShadow({mode: 'open'});         shadowRoot.innerHTML = `       <style>         .card {           background-color: #fff;           ...         }       </style>       <div class="card">         <div>Card title</div>       </div>     `;   }}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.innerHTML = `       <style>         .card {           background-color: var(--card-bg, #fff);           ...         }       </style>       <div class="card">         <div>Card title</div>       </div>     `;   }}window.customElements.define('app-card', AppCard);

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

<html>   <head>     <style>       body {         --card-bg: #2196F3;       }     </style>   </head>   <body>     <app-card></app-card>   </body> </html>
怎么在Shadow DOM/Web组件中覆盖CSS

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

推荐阅读:
  1. css中如何​使用 :not()在菜单上应用/取消应用边框
  2. CSS中如何实现水平垂直居中

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:怎么开源你的Python库

下一篇:怎么构建nftables

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》