使用shadow dom封装web组件
什么是shadow dom?
首先我们先来看看它长什么样子。在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件。
<video controls=""><source src="https://mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/ogg"> </video>
而在各个浏览器中,它都有各不相同的外观展现,例如chrome中它长下面这样:
但为什么我们在dom中无法看到他们内部的结构?噢,实际上浏览器通过某种技术把它们隐藏起来而已,但我们可以通过 DevTools 设置中勾选Show user agent shadow DOM来看到这些结构。勾选后我们发现在 <video> 标签下多了 #shadow-root(user-agent) 这个东西,它包含了 video 控件的内部dom结构,这就是所谓的shadow dom了。
并且shadow dom为我们提供了简单有效的样式隔离。如果你尝试通过 input[type="button"] { display:none; } 之类的样式来影响控件外观,你会发现是无效的。这样如果我们通过 shadow dom 来隐藏控件的内部实现,就不用担心对样式表进行修改时对控件造成影响了。
下面我们来看看如何通过shadow dom来封装控件。
使用Shadow Dom封装控件
首先我们先看看w3c对shadow dom的描述:
A shadow host is an element that hosts one or more node trees.
A shadow tree is a node tree hosted by a shadow host.
A shadow root is the root node of a shadow tree.
这三句话告诉我们:
- - shadow dom 由一颗或多颗 shadow tree 组成,并且需要一个普通的dom元素作为它的容器
- - shadow tree 是一颗节点树
- - shadow root 是shadow tree的根节点
下面,我们直接通过一个例子来演示如何使用shadow dom来封装web组件:
DOM:
// 模板 <template id="wgTemplate"><style>color: #fff;background: #006dcc;</style><button type="button" class="btn">button widget</button> </template>// shadow dom 容器 <div id="my-widget"></div>
JS:
// 创建shadow dom <script type='text/javascript'>var host = document.querySelector("#my-widget")var tp = document.querySelector("#wgTemplate")var clone = document.importNode(tp.content, true)host.createShadowRoot().appendChild(clone) </script>
- 第一步,我们需要一个shadow dom的容器 <div id="my-widget"></div>
- 随后通过 document.importNode() 获取到控件的模板并克隆
- 接着使用 createShadowRoot() 要创建一个shadow root作为shadow tree的根节点
- 最后将将模板内容 clone 作为shadow tree插入到shadow root中
打开页面,我们可以看到如下结构,这就是一个利用shadow隐藏控件内部实现最简单的例子了。
接着我们还可以结合上一篇文章《web component之custom element》的创建自定义元素的方法来封装自定义控件:
dom:
// 模板 <template id="wgTemplate"><style>.btn {color: #fff;background: #006dcc;}</style><button type="button" class="btn">custom button widget</button> </template>
js:
// 创建自定义控件 <script type='text/javascript'>var proto = Object.create(HTMLElement.prototype, {createdCallback: {value: function() {var tp = document.querySelector('#wgTemplate')var clone = document.importNode(tp.content, true)this.createShadowRoot().appendChild(clone)}}})var MyButtom = document.registerElement('my-buttom', {prototype: proto})document.body.appendChild(new MyButtom()) </script>
转载于:https://www.cnblogs.com/WhiteCusp/p/4342502.html
使用shadow dom封装web组件相关推荐
- Shadow DOM的理解
Shadow DOM的理解 Shadow DOM是HTML的一个规范,其允许在文档document渲染时插入一颗DOM元素子树,但是这棵子树不在主DOM树中,Shadow DOM如果按照英文翻译的话可 ...
- 使用 Vanilla JavaScript 创建 Web 组件
Web 应用程序开发是一个非常拥挤的技术领域.有不同类型的框架.库和工具.在开发 Web 应用程序时,主要目标是提供带有封装组件的高质量用户界面 (UI). 因此,当您使用 React.Vue.Ang ...
- shadow dom的作用和用法详解(createShadowRoot, attachShadow)
相信shadow dom很多前端开发工作者都遇到过,它是web component的一部分.不过对于shadow dom很多人并不深入了解,只晓得是影子dom结构,那么到底什么是shadow dom的 ...
- [译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component
原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...
- Web组件 – 构建商业化应用的基石
概述 Web Components(Web 组件)规范是一个新兴的技术集合,允许您在前端Web应用程序中定义已封装的自定义HTML元素. 使用Web Components,您可以创建自己声明的API来 ...
- 理解Shadow DOM
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- 纯CSS菜单样式,及其Shadow DOM,Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 先放一张效果图 Part 1:纯CSS菜单样式 先放样式代码 1 <sty ...
- 为什么我不使用 Web 组件?
Web 组件是指对 Web 的数据和方法进行封装实体,它的到来,方便了很多开发者对业务逻辑方面的处理,不过也有人认为,Web 组件并不适合自己. 作者 | Rich Harris 译者 | 宋蕾,责编 ...
- Web 组件即将取代前端框架?!| 技术头条
[CSDN 编者按]提起前端开发,不少开发者首先会对主流技术框架如 Vue.React.Angular 进行一番对比之后,选择相应的技术架构. 在此,随着前端框架的不断升级,其也变得越来越臃肿与复杂, ...
- Web 组件势必取代前端?
在现代Web API的发展下,创建可重用的前端组件终于不再需要框架了. 作者 | Danny Moerkerke,JavaScript程序员,自由职业者 译者 | 弯月 责编 | 郭芮 出品 | CS ...
最新文章
- git克隆远程项目并创建本地对应分支
- WebClient UI忽略所有增强的开关
- css的fill属性,css column-fill属性怎么用
- 【Linux基础】Linux的5种IO模型详解
- 传统企业装上“智慧大脑” 看阿里巴巴如何实践AI赋能
- model 创建帖子的方法
- 【C++】C++类和对象
- delphi mysql 8.0_Delphi 8免费版
- 各种音频视频编解码详细介绍
- 《JavaScript高级程序设计》- 第一章:介绍JavaScript
- 终极解决苹果开发者中心Edit Phone Number
- c语言case2什么意思,switchCase2
- 调试spi转can芯片MCP2518和can芯片MCP2542FD
- Docker:第一章:Docker常用命令
- ntoskrnl.exe损坏或丢失的解决方案
- threejs 形状几何体_使用Playcanvas.js实现的3D几何体/形状
- 【面试必备】深入分析App卡顿原因及优化建议
- 基本概念 - 二维关系表
- 计算机组成原理实验二
- 负数与正数相乘怎么算_为啥两个负数相乘结果是正数?
热门文章
- rrdtool安装编译提示错误:Can’t locate ExtUtils/MakeMaker.pm in @INC
- 对break和continue的一些个人认知(称不上见解)
- 【SAP HANA】关于SAP HANA中带层次结构的Attribute View创建、激活状况下在系统中生成对象的研究...
- (其他)用sublime text3编写的html网页用浏览器打开出现中文乱码的原理及解决方法(转)...
- StackOverflow
- Size Balanced Tree(节点大小平衡树)
- [转载] Comet:基于 HTTP 长连接的“服务器推”技术
- 20100823工作记录
- 最近一个快要结束的项目的BUG分析
- java day31【web概念概述 、HTML】