前言通过前面的学习，我们对自定义组件的概念和知识点有了一定的了解。今天我们将学习如何自定义元素及其组件。几种设置子元素样式的方法。直接在自定义标签中添加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;背景色：黄色；字体大小：16px；font-weight:bold;}效果如下：当然也可以在主DOM中使用JS给ShadowDOM引入CSS文件，但这不符合组件化的特点，所以略过结论。以上是自定义元素及其子元素样式化的基本方法总结。~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！
