如何编写一个原生 Web Components 组件( 二 ) _Web

现在我们尝试使用下组件，往其内容添加一个图片，指向名为 desc 的 slot 插槽中：
<warning-card><img slot="desc" src=https://www.isolves.com/it/cxkf/yy/html5/2022-10-07/"https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba825ffee78c4a1b9c0232e5d2f1d048~tplv-k3u1fbpfcp-watermark.image?" />这时你会发现，图片插入到 details 元素的隐藏区域当中了，slot 已经成功生效，但是样式却消失了，这时因为组件已经被完全隔离，我们需要将样式作用在其内部才会生效。
<template id="warning-card"><style></style><details class="ContentWarning"><summary><strong>?? 注意:</strong></summary><slot name="desc">THE DESCRIPTION</slot></details></template>这样组件就正常了：

文章插图

除了定制模板中的插槽，我们也可以通过 HTML 标签属性来实现一些简单的传参，例如在 summary 标签中显示一个标题:
<warning-card title="前方高能"></warning-card>我们只需要在模板中定义好这个标题的位置:

<template id="warning-card"><details class="ContentWarning"><summary><!-- TODO: 模板中加入一个span标签 --><strong>?? 注意:</strong> <span id="title"></span></summary></details></template>

最后在构造函数中我们通过 document 的原生方法写入模板中就可以了:

window.customElements.define('warning-card',class extends HTMLElement {constructor() {super();var template = document.getElementById('warning-card').content;// TODO: 找到title标签，写入传入组件的title属性值template.querySelector('#title').innerText = this.getAttribute('title');this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));}})

结束至此，我们通过一个简单的原生组件学习了如何编写 Web Components，可以在此代码片段中查看具体源码：原生Web Components组件 - 码上掘金原生Web Components组件 - 码上掘金。