说到 shadow-dom 可能很多人会很陌生。但是其实我们肯定碰到过，本文主要想简单介绍下 shadow-dom。下面直接进入正文。...shadow-dom 是什么 顾名思义， shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。...使用伪元素控制 shadow-dom 样式 这里我们要使用到伪元素，通过伪元素，我们可以控制 shadow-dom 中 DOM 结构的样式。...在 chrome 下，查看 shadow-dom 结构（如果无法看到shadow-dom需要手动打开），可以看到每个结点都加上了一个 pesudo 属性： ?...shadow-dom 兼容性 ? shadow-dom 的未来 本文是非常基本的一些关于 shadow-dom 的概念，只是它的冰山一角，没有十分深入的去研究。
important，使用shadow-DOM。...基本语法 shadow-DOM的创建必须要使用JavaScript才能完成，我们需要在文档中有一个用于挂在shadow-DOM的真实元素，也被称为host。...$tag.shadowRoot; // shadow-DOM的root元素 当值为closed时，则表示外层无法获取shadow-DOM。...shadow-DOM的使用方式 P.S....因为shadow-DOM版本的组件相对更独立一些，所以这里采用的是shadow-DOM的方式进行封装。
近段时间大热的omi就是基于web-components实现的 web-components主要由3部分组成 custom-elements shadow-dom slot template custom-elements...shadow-dom最大的好处就是实现了dom隔离。例如css只会对内部的shadow-dom有效，并不影响外部的元素。
3、Shadow DOM的创建方法 var ele =document.getElementsByClassName('shadow-dom')[0]; var root = ele.createShadowRoot
参考： http://soledadpenades.com/2014/01/02/shadow-dom-in-firefox/ http://www.w3.org/TR/shadow-dom/
你可以同时使用 OMI 开发这工具或者微信开发者工具调试，既然 Omi 使用了 WebComponents 和 Shadow-DOM, 所以不需要像 React 一样安装其他元素面板，只需要使用Chrome
}}" is-show="{{isCalendarShow}}"> 但是这里也引起了其他问题，因为引入了shadow-dom
因为之前我认为页面是使用NativeUI做渲染跟Webview没撒关系，便觉得这个图有问题，但是后面实际代码看到了熟悉的shadow-dom以及Android可以看到哪部分是Web的，其实小程序主体还是使用的浏览器渲染的方式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
