Web Components 系列之 自定义组件的样式设置

前言

通过前面的学习，对自定义组件的相关概念和知识点也有了一定了解，今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法。

湘阴ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

直接给自定义标签添加样式

index.html：

index.js：

class MyCard extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: "open" });
    }
}

window.customElements.define("my-card", MyCard);

结果样式生效：

需要注意的是：继承自 HTMLElement 的自定义元素，其 style.display 默认为 inline。

由以上结果可以推论出：

1. 给自定义元素添加 class，然后通过 class 名称设置样式可以生效;
2. 给自定义元素添加行内样式，可以生效;
3. 在自定义元素构造函数中给 this 添加样式，可以生效。

给自定义元素内部子元素设置样式

在主 DOM 通过类名设置

在 style 标签中增加如下样式：

结果：不生效。

通过前面的学习，我们知道：自定义元素内部实际上是一个 Shadow DOM，它和主 DOM 是相互隔离的，所以，主 DOM 中的样式是影响不到 Shadow DOM 的。

使用 JS 给 Shadow DOM 增加 style 标签

这里分为两种场景：在主 DOM 使用 JS 、在 Custom Elements 构造函数中使用 JS。

第一种：在主 DOM 使用 JS 给 Shadow DOM 增加 style 标签：

效果如下：

第二种：在 Custom Elements 构造函数中使用 JS 增加 style 标签：

效果如下：

就以上两种方式来说，第二种更符合组件化的特征，并且使用第一种方式时要注意，如果将添加 style 标签的代码放在定义 Custom Elements 之前会报错(找不到自定义元素)。

引入 CSS 文件

这里使用 JS 创建 link 标签，然后引入 CSS 文件给自定义元素内部的子元素设置样式，代码如下：

my_card.css 代码如下：

.card-header{
    padding:10px;
    background-color: yellow;
    font-size: 16px;
    font-weight: bold;
}

效果如下：

当然，这里也可以在主 DOM 中使用 JS 给 Shadow DOM 引入 CSS 文件，但是，这样做不符合组件化的特征，所以略过。

结束语

以上就是给自定义元素及其子元素进行样式设置的基本方法总结。

~

名称栏目：Web Components 系列之 自定义组件的样式设置
网页链接：http://www.mswzjz.com/qtweb/news48/181698.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联