浏览器发展至今，很多浏览器已经很好的支持web component了，如果实在需要兼容IE、Edge还可以用pollyfill来增强一下浏览器
最全的使用文档：
chrome开发者相关：https://developers.google.com/web/fundamentals/web-components/
下面我们来大概看看怎么使用
test.html:
<!DOCTYPE html> <html lang="en"> <head> <style> /* * 可以外部定义web component样式，但是内部的shadow dom，选择器无法命中 * 这里定义的样式优先级高于:host定义的样式，就是如果定义display:inline;会覆盖掉:host定义的display:block; * 这里也可以定义css变量，在shadow dom里面使用 **/ app-drawer { --font-color: grey; line-height: 50px; } /* slot进去的可以命中 */ app-drawer div { font-style: italic } /* shadow dom的没法命中 */ app-drawer p { font-style: italic } </style> </head> <body class="little"> <!-- 原生支持的template，用于web component的shadow dom --> <template id="temp"> <!-- 这里的style是跟外界独立开的，相当于vue的scoped --> <style> :host { line-height: 20px; display: block; cursor: pointer; color: var(--font-color, #ff0); /* 通常，网络组件的布局/样式/绘制相当独立。在 :host 中使用 CSS containment 可获得更好性能 */ contain: content; } /* host-context表示父级如果命中括号里面的选择器则应用里面的样式，如果命中多个，且有冲突则看优先级 */ :host-context(.big) { font-size: 32px; font-weight: bold; } :host-context(.little) { font-size: 16px; } p { color: orange; } /* 给插槽引进来的元素添加样式 */ ::slotted(span) { color: var(--font-color, #f00); } </style> <!-- 在这里引入样式表，也是同样只适用于组件内部 --> <link rel="stylesheet" href="./style.css"> <p> 我是template啦~ </p> <!-- 插槽 --> <slot name="slot1"></slot> <p>**<slot></slot>**</p> <!-- 这里使用script和在template外使用是一样的，this都是window --> <script> console.log('来自shadow dom的问候') console.log(this) </script> </template> <app-drawer class="big"> <div slot="slot1">我从是slot1插槽进来的div1啦~</div> <span>我从是默认插槽进来的span啦~</span> <div slot="slot1">我从是slot1插槽进来的div2啦~</div> </app-drawer> <p>12312</p> <!-- 定义自定义web component --> <script src="./test.js"></script> </body> </html>
test.js:
class AppDrawer extends HTMLElement { // 定义组件需要同步更新到DOM的属性 get open() { return this.hasAttribute('open'); } set open(val) { if (val) { this.setAttribute('open', ''); } else { this.removeAttribute('open'); } this.toggleDrawer(); } // 相当于vue component的beforeCreate constructor() { super(); /** * 创建shadow dom * mode可以时open和closed (建议任何时候都别使用closed，不必要的限制造成很多不便) * delegatesFocus 在shadow dom元素focus时，是否也使容器也focus */ let shadowRoot = this.attachShadow({mode: 'closed', delegatesFocus: true}); // 复制一份template const temp = document.querySelector('#temp').content.cloneNode(true) // 添加进shadow dom shadowRoot.appendChild(temp) // 添加事件 this.addEventListener('click', e => { this.open = !this.open }); shadowRoot.querySelector('p').addEventListener('click', e => { console.log(e.target) }); // 初始化先执行一次 this.toggleDrawer() } /** * 生命钩子有： * connectedCallback：插入到 DOM 时，相当于vue component的created * disconnectedCallback： 从DOM中移除时，相当于vue component的beforeDestroy * attributeChangedCallback：属性添加、移除、更新或替换时，有点像vue component的beforeUpdate(不完全等同) * adoptedCallback：被移入新的 document时 */ // 定义组件的方法 toggleDrawer() { this.style.backgroundColor = this.open ? 'red' : 'pink' } } // 定义自定义组件，名字一定要有"-", 不然浏览器不认为它是web component, 会认为是一个HTMLUnknownElement customElements.define('app-drawer', AppDrawer);