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

本文转载自微信公众号「编程三昧」，自定作者隐逸王 。义组样式转载本文请联系编程三昧公众号。设置

前言

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

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

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 文件，义组样式但是设置，源码库这样做不符合组件化的自定特征，所以略过。义组样式

结束语

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

自定

~

自定

很赞哦!（5）