写给小白的教程之WebComponent（1）
1、为啥会有这一篇 ？
前两天有个同学问我，然后组内同学也即将分享相关实践内容，此处 在他之前发出（早一天发布的发布会），good!
2、是何物？
组件化是前端非常重要的一块内容，现在流行的 React 和 Vue 都是组件框架。
谷歌 Chrome 一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，不用加载任何外部模块，代码量小。当前发展较为成熟，在很多项目中被使用
广受好评！
3、基本概念早知道
Web Components主要由三项技术组成，分别为
Custom elements（自定义元素）
Shadow DOM（影子DOM）
HTML templates（HTML模板）
自定义元素实例
customElements.define(
'test-custom', // name
class TestCustom extends HTMLParagraphElement { // 这个类定义功能
constructor() {
super();
// 功能代码
...
}
}, { extends: 'p' }); // 继承自哪个元素 此处 p影子 DOM
Shadow DOM 可将隐藏的 DOM挂到一个元素上，且 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样
如下图
想将一个 Shadow DOM 附加到 custom element 怎么做？
class Button extends HTMLElement {
constructor() {
super();
let shadow = this.attachShadow({mode: 'open'}); // 挂到 构造函数上
}
}操作一下 也是 ok 的
class Button extends HTMLElement {
constructor() {
super();
let shadow = this.attachShadow({mode: 'open'});
let p = document.createElement('p');
shadow.appendChild(p);
}
}我想添加样式 怎么办 ？
let mySelfStyle = document.createElement('style');
mySelfStyle.textContent = `
.btn-container {
position: relative;
}
.btn {
// ...
}
`
shadow.appendChild(mySelfStyle);good !
HTML模版
类似于 html 结构 和 vue slot
<html>
<template>
<h1><slot name="title"></slot></h1>
<p><slot name="description"></slot></p>
</template>
</html>更多细节和完整内容，请点击https://juejin.cn/post/7148620121886425125，感谢阅读～
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-09-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读