本文转载自微信公众号《编程三昧》，作者王隐。转载本文请联系ProgrammingSanmai公众号。前言通过前面的学习，我们对自定义组件的相关概念和知识点也有了一定的了解。今天我们将学习几种为自定义元素及其子元素设置样式的方法。直接在自定义标签中添加styleindex.html：index.js：classMyCardextendsHTMLElement{constructor(){super();this.shadow=this.attachShadow({mode:"open"});}}window.customElements.define("my-card",MyCard);生成的样式生效：需要注意的是：对于继承自HTMLElement的自定义元素，默认的style.display是内联的。从上面的结果可以推断：给自定义元素添加一个类，然后通过类名设置样式即可生效；给自定义元素添加内联样式即可生效；在自定义元素构造函数中给this添加样式即可生效。为自定义元素的内部子元素设置样式。在主DOM中，设置类名并在样式标签中添加以下样式：结果：不生效。通过前面的学习，我们知道自定义元素内部其实是一个ShadowDOM，它与主DOM是隔离的，所以主DOM中的样式是无法影响到ShadowDOM的。使用JS给ShadowDOM添加样式标签有两种场景：在主DOM中使用JS和在CustomElements构造函数中使用JS。第一种：在主DOM使用JS给ShadowDOM增加样式标签：效果如下：第二种：使用JS在CustomElements构造函数中添加style标签：效果如下：就以上两种方式而言，第二种更符合组件化的特点，支付使用第一种方法时注意，如果添加样式标签的代码放在自定义元素定义之前，会报错（找不到自定义元素）导入CSS文件这里使用JS创建链接标签，然后导入CSS文件为自定义元素内部的子元素设置样式。代码如下：my_card.css代码如下：.card-header{padding:10px;背景色：黄色；字体si泽：16px；font-weight:bold;}效果如下：当然也可以在主DOM中使用JS将CSS文件导入到ShadowDOM中，但这不符合组件化的特点，略过结论。对自定义元素及其子元素设置样式的基本方法的总结。~
