如何写一个原生的WebComponents组件

在如今的前端编程中，使用语义化的HTML结合CSS来完成一个组件并不难，这也意味着在React和Vue中都可以插入，但是它这两个不是今天的主角。下面我将通过一个例子来介绍如何封装一个完整的原生HTMLWebComponents组件。让我们开始吧！HTML结构首先让我们了解HTML中的

元素，它可用于创建一个小部件，其中包含仅当小部件处于“打开”状态时才可见的附加信息。

元素可以包含的内容没有限制。

元素创建的小部件默认情况下是“关闭”的（open标签将其打开）。单击小部件可在“打开”和“关闭”状态之间切换以显示或隐藏标签中包含的其他信息，内部标签

元素提供小部件的摘要。一个简单的例子如下：

不言而喻的秘密

隐藏的这么深，你还是发现了它

details{border:1pxsolid#aaa;边界半径：4px；padding:.5em.5em0;}summary{font-weight:bold;保证金：-.5em-.5em0；padding:.5em;}details[open]{padding:.5em;}details[open]summary{border-bottom:1pxsolid#aaa;margin-bottom:.5em;}使用语义化HTML的优点：页面内容结构更清晰，开发者更容易阅读，更有利于浏览器理解和加载、搜索引擎分析和SEO优化。添加亿点样式原生元素的默认样式很简单，所以我们需要为其自定义样式。我们将简要介绍这部分内容，只对重点部分进行说明。样式内容省略。您可以在本文末尾的代码块中看到它。到渲染效果。.ContentWarning>摘要{位置：相对；列表样式：无；/**移除默认样式**/user-select:none;游标：指针；/**添加斜线背景**/--stripe-color:rgb(000/0.1);background-image:repeating-linear-gradient(45deg,transparent,transparent0.5em,var(--stripe-color)0.5em,var(--stripe-color)1em);}/**悬停时调整颜色样式viavarvariables**/.ContentWarning>summary:hover,.ContentWarning>summary:focus{--stripe-color:rgb(15000/0.1);}封装模板现在我们把它封装成一个完整的组件，首先需要在template模板中写HTML，并设置一个id，如下图：content

隐藏的这么深，你还是发现了

/template>熟悉Vue的朋友应该很容易看懂上面的代码，结构是很像，但是网页不会直接渲染它包裹的内容。另外，我们还为这个模板设置了一个slot，它的作用后面会讲到。定义组件有了上面封装的模板，我们需要在JS中将其定义为一个可用组件，这样才可以使用。调用window下的customElements.define方法。第一个参数是传入的组件名称。我们定义组件名称为：warning-card，第二个参数传入一个继承HTMLElement的类，在其构造方法中获取并克隆一个新的HTML节点，通过appendChild渲染到页面。window.customElements.define('warning-card',classextendsHTMLElement{constructor(){super();vartemplateElem=document.getElementById('warning-card');varcontent=templateElem.content.cloneNode(true);this.appendChild(content);}})那么我们可以在页面中将其作为一个组件使用：这个时候还是不行，我们需要稍微重写一下构造函数中的渲染方法，将web组件定义为一个ShadowDOM，这样就可以构造一个标记的结构、样式和行为，并且是一个独立的元素与页面其他代码隔离，保证不同部分不会混在一起，最后使用Node.cloneNode()方法将模板的副本添加到Shadow的根节点。window.customElements.define('warning-card',classextendsHTMLElement{constructor(){super();vartemplate=document.getElementById('warning-card').content;this.attachShadow({mode:'open'}).appendChild(template.cloneNode(true));}})现在我们尝试使用下一个组件，将图像添加到其内容中，指向名为desc的插槽：然后你会发现，图片插入到了details元素的隐藏区域，slot应用成功了，但是style消失了。这个时候，因为组件已经完全隔离了，所以我们需要应用它里面的样式才能生效。

??注意：

THEDESCRIPTION

这个组件很正常：除了自定义模板中的slot之外，我们还可以实现一些HTML标签属性Simpleparameter传递，比如在summary标签中显示一个标题：我们只需要定义这个标题在模板中的位置：

??注意：

最后在构造函数中，我们可以通过document的native方法将其写入到模板中：window.customElements.define('warning-card',classextendsHTMLElement{构造函数(){super();vartemplate=documentnt.getElementById('警告卡').content;//TODO:找到title标签，写入传入组件的title属性值template.querySelector('#title').innerText=this.getAttribute('title');this.attachShadow({mode:'open'}).appendChild(template.cloneNode(true));}})至此，我们就学会了如何通过一个简单的原生组件来编写WebComponents，可以在这段代码片段中查看具体源码以上就是文章的全部内容，希望对大家有所帮助给你！觉得文章写得好，可以点赞收藏。也欢迎您关注。我会持续更新更多有用的前端知识和实用技巧。一日茶无味，愿与你共同成长~