Web Components 系列（八）—— 自定义组件的样式设置

最新推荐文章于 2024-07-18 14:38:38 发布

编程三昧

最新推荐文章于 2024-07-18 14:38:38 发布

阅读量1.4k

点赞数 1

分类专栏： HTML 文章标签：前端 css3 组件化 javascript html

本文链接：https://blog.csdn.net/qq_37718797/article/details/122949946

版权

本文详细介绍了如何为Web Components的自定义元素及其内部子元素设置样式，包括直接添加样式、通过类名设置、使用JS在Shadow DOM中增加style标签以及引入CSS文件的方法。通过实例展示了各种方式的效果，强调了在组件化中使用JS添加style标签的第二种方式的优越性。

摘要由CSDN通过智能技术生成

样式设置.001

前言

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

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

index.html：

<style>
    my-card{
     
        display: block;
        margin: 20px;
        width: 200px;
        height: 200px;
        border: 3px solid #000;
    }
</style>
<my-card></my-card>
<script src="./index.js"></script>

index.js：

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

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

结果样式生效：

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

由以上结果可以推论出：

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

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

在主 DOM 通过类名设置

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

<style>
    my-card {
     
        display: block;
        margin: 20px;
        width: 200px;
        height: 200px;
        border: 3px solid #000;
    }
    .card-header {
     
        padding: 10px;
        font-weight