webcomponent学习笔记（一）
- 2019 年 12 月 4 日
- 筆記
本文作者：IMWeb 黄龙 原文出处：IMWeb社区 未经同意，禁止转载
webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分:
- Shadow DOM
- Custom Elements
- HTML Imports
- HTML Templates
Shadow DOM是什么
直接翻译是 影子文档对象模型。
定义：Shadow DOM 是一个 HTML 的新规范，其允许开发者封装自己的 HTML 标签、CSS 样式和 JavaScript代码。 使得开发人员可以自定义诸如 <input type="range"> 这样的一级标签。
我们就用range组件来来解释Shadow DOM
<input type="range">
打开Chrome的开发者工具，点击右上角的"Settings"按钮，
勾选“Show user agent shadow DOM”，
你就可以看到range组件的DOM结构的细节。
你会发现，浏览器内部实现range组件也是通过定义dom结构来实现的。 看到标灰的 #shadow-root 了吗？这里就是所有视频播放器控制组件的所在之处。浏览器之所以将其置灰，是为了表明这部分是在 shadow DOM 里，对于页面的其他部分来说它是不可用的。这里的不可用意味着你写的 CSS 选择器和 JavaScript代码都不会影响到这部分内容。
必须的HelloWorld
可以戳这里 http://git.360rush.com/demo/shadowDom/helloworld.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shadow DOM -- Hello World</title> </head> <body> <div class="hi">你好Shadow DOM!</div> <script> var hi = document.querySelector('.hi'); var shadowRoot = hi.createShadowRoot(); var dom = document.createElement('p'); dom = '《<content></content>》'; shadowRoot.appendChild(dom); </script> </body> </html>
结果是这样子的
我们在helloworld中使用<content>标签,它的作用是在Shadow DOM中使用宿主的内容。
那么我能只显示其中一部分的内容吗？ 答案是可以得，我们来看看下面的例子 http://git.360rush.com/demo/shadowDom/contentSelector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shadow DOM -- contentSelector</title> </head> <body> <helloworld> <span class="name">lonnyhuang</span> <span class="sex">男</span> <span class="city">深圳</span> </helloworld> <script type="tpl" class="sd-helloworld"> <style> p { line-height: 20px; margin: 0; } </style> <p>姓名：<content select=".name"></content></p> <p>性别：<content select=".sex"></content></p> <p>所在城市：<content select=".city"></content></p> </script> <script> var host = document.querySelector('helloworld'); var shadowRoot = host.createShadowRoot(); shadowRoot = document.querySelector('.sd-helloworld'); </script> </body> </html>
这里要用到<content>标签的select属性。为了方便这里直接用script标签做模板。可以看到对应的标签映射到了select选择器对应的位置
这里仅仅简单介绍了Shadow DOM的v0版本api。有人总结了v1版本和v0的不同点。其中提到也可以用slot来做选择宿主的子节点的选择器，试了一下我的chrome还没有支持 地址在这里：http://hayato.io/2016/shadowdomv1/
