前言
通过前面的学习,对自定义组件的相关概念和知识点也有了一定了解,今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法。
直接给自定义标签添加样式
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