您现在的位置是：亿华云 > 应用开发
Web Components 系列之 自定义组件的样式设置
亿华云2025-10-03 02:02:44【应用开发】1人已围观
简介本文转载自微信公众号「编程三昧」，作者隐逸王 。转载本文请联系编程三昧公众号。前言通过前面的学习，对自定义组件的相关概念和知识点也有了一定了解，今天我们就来学习一下给自定义元素及其子元素设置样式的几种
本文转载自微信公众号「编程三昧」，自定作者隐逸王 。义组样式转载本文请联系编程三昧公众号。设置
前言
通过前面的自定学习，对自定义组件的义组样式相关概念和知识点也有了一定了解，亿华云计算今天我们就来学习一下给自定义元素及其子元素设置样式的设置几种方法。
直接给自定义标签添加样式
index.html：
my-card {
display: block;
margin: 20px;
width: 200px;
height: 200px;
border: 3px solid #000;
}
class MyCard extends HTMLElement {
constructor () {
super();
this.shadow = this.attachShadow({ mode: "open"});
let linkEle = document.createElement("link");
linkEle.rel = "stylesheet";
linkEle.href = "./my_card.css";
this.shadow.appendChild(linkEle);
let headerEle = document.createElement("div");
headerEle.className = "card-header";
headerEle.innerText = "My Card";
this.shadow.appendChild(headerEle);
}
}
window.customElements.define("my-card",自定 MyCard);
my_card.css 代码如下：
.card-header{
padding:10px;
background-color: yellow;
font-size: 16px;
font-weight: bold;
}
效果如下：
当然，这里也可以在主 DOM 中使用 JS 给 Shadow DOM 引入 CSS 文件，义组样式但是设置，高防服务器这样做不符合组件化的自定特征，所以略过。义组样式
结束语
以上就是设置给自定义元素及其子元素进行样式设置的基本方法总结。云服务器
自定~
自定很赞哦!（3717）
