web-components实践

web-components是一个比较新的开发技术,但组件化思想已经实际应用了很长时间,代表性的组件话框架有vue, react等。web-components可以直接使用原生HTML和Javascript来封装通用的 web 组件,其拥有简单直接、无任何依赖等特点,是 web 前端开发的一个强有力的技术。 文章前半部分讲web-components相关接口,最后有一个进度条组件实例,点击这里可直接跳转。 Web-Components API Web-Components API有三个核心部分,分别是:Custom elements, Shadow DOM, HTML templates。 Custom elements custom elements顾名思义,允许我们自定义通用的 HTML 标签,可以是一个包含特定功能如:日历、时间显示、进度条等。 创建自定义元素 使用自定义元素,必须先使用customElements.define(name, constructor, options)方法注册元素后才能使用,参数分别为元素名称,元素构造函数,选项(可选)。自定义元素名称不能是单个字母。 生命周期 自定义元素生命周期有 4 个回调函数: connectedCallback:当 custom element 首次被插入文档 DOM 时调用。 disconnectedCallback:当 custom element 从文档 DOM 中删除时调用。 adoptedCallback:当 custom element 被移动时调用。 attributeChangedCallback:当 custom element 增加、删除、修改自身属性时调用。 Shadow DOM 通常情况下,我们封装 web 组件的时候,需要将组件内部的样式封装进去,同时也要避免被外部样式干扰。Shadow DOM是隐藏在一个 DOM 节点里面的节点树,主要特点就是于外部 DOM 树隔离,使组件维护成本大大降低。Shadow DOM并不是新鲜玩意儿,而是浏览器内部 API 实现,我们常用的一些标签如带控制按钮的video标签,其内部就是一个Shadow DOM树。 创建 Shadow DOM Shadow DOM有几个核心概念: Shadow host: 一个常规 DOM 节点,Shadow DOM 会被添加到这个节点上。 Shadow tree: Shadow DOM 内部的 DOM 树。 shadow root: Shadow tree的根节点。 Shadow root: Shadow tree 的根节点。 Shadow boundary: Shadow DOM 结束的地方,也是常规 DOM 开始的地方。 创建Shadow DOM需要用到attachShadow({ mode: 'open' })方法,参数中mode的取值有两个:open, closed,用来配置是否可以从外部获取shadow tree。该函数返回一个Shadow Root。...

October 3, 2019 · 2 min · 340 words · Johnson