web component
Web Component
2023-09-14 09:00:17 时间
浏览器发展至今,很多浏览器已经很好的支持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);
相关文章
- Web开发的几点经验谈
- 【CTF WEB】文件包含
- 客户端的web技术
- 第二百五十六节,Web框架
- loadrunner12.55:常用函数汇总说明之Web Vuser Functions(WEB)参数函数
- 有状态的 web 应用
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
- [Web component] Using Custom Events as a web component API
- [Web Component] Allow External Styling of a Web Component's Shadow DOM
- [Vue @Component] Dynamic Vue.js Components with the component element
- 【斗医】【12】Web应用开发20天
- 如何使用SAP UI5 web Component的React框架的柱状图和折线图
- SAP UI5 web Component里的条件渲染机制
- SAP UI5 Web Component里最简单的React列表控件的用法
- SAP UI5 Web Component里如何自定义CSS style
- Web测试中,各类web控件测试点总结
- 你该不会不知道,web自动化测试中的八大定位方法吧!
- 【Web测试】各类web控件测试点汇总,软测人必备
- Tomcat卷五---Web 应用配置,管理配置和JVM配置