浏览器发展至今，很多浏览器已经很好的支持web component了，如果实在需要兼容IE、Edge还可以用pollyfill来增强一下浏览器
最全的使用文档：https://developers.google.com/web/fundamentals/web-components/
下面我们来大概看看怎么使用
test.html:
<!DOCTYPE html> <html lang="en"> <head> <style> /* 可以外部定义web component样式，但是内部的shadow dom，选择器无法命中 */ app-drawer { font-size: 20px; } /* slot进去的可以命中 */ app-drawer div { font-style: italic } /* shadow dom的没法命中 */ app-drawer p { font-style: italic } </style> </head> <body> <!-- 原生支持的template，用于web component的shadow dom --> <template id="temp"> <!-- 这里的style是跟外界独立开的，相当于vue的scoped --> <style> p { color: orange; } </style> <p> 我是template啦~ </p> <!-- 插槽 --> <slot></slot> <!-- 这里使用script和在template外使用是一样的，this都是window --> <script> console.log(‘来自shadow dom的问候‘) console.log(this) </script> </template> <app-drawer> <div>我从是插槽进来的div啦~</div> </app-drawer> <!-- 定义自定义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和close let shadowRoot = this.attachShadow({mode: ‘open‘}); // 复制一份template const temp = document.querySelector(‘#temp‘).content.cloneNode(true) // 添加进shadow dom shadowRoot.appendChild(temp) // 添加事件 this.addEventListener(‘click‘, e => { this.open = !this.open }); } // 插入到 DOM 时，相当于vue component的created connectedCallback() { // web component容器的样式需要到这个钩子才能添加 this.style.cursor = ‘pointer‘ this.style.display = ‘block‘ this.toggleDrawer() } /** * 生命钩子还有： * 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);
原文：https://www.cnblogs.com/amiezhang/p/11108823.html