Web-Components

去年 10 月，咱们对外开源了 Quarkd（quark design 缩写）。开源之初，咱们给本人定下 star 数量超过 70 个就行的心态，却意外失去了 1600 多 star，很受鼓励～ 那一刻起，咱们晓得，在前端框架“泛滥”的时代，还有一些人在追寻原生技术，大道至简，平淡为归。 这也让咱们想起了 kk 说的那句话：所有翻新都产生在事物边缘，所有的颠覆都来自边缘。 明天，咱们正式对外开源 Quark 生态 的又一成员，Quarkc（Quark core 缩写）。上面来做个简略介绍吧 ：） Quarkc 将于 2023-06-30·北京稀土开发者大会进行分享 官网：https://quark.hellobike.com/ github(欢送 star)：https://github.com/hellof2e/quark Quarkc 是什么？Quarkc (Quark core 缩写) 是由哈啰平台前端团队开发的一套面向未来的  无框架  组件构建工具！它能够让你实现低成本/高效开发规范的 跨框架组件 或者 构建整个利用，底层基于浏览器原生 API: Web components。 无需 AST，无需黑魔法，Quarkc 能够让你低成本实现 Write once, run anywhere！ 外围：让组件实现技术栈无关！ Why Quarkc ?背景 1:【前端的历史】前端倒退多年，无论大小公司，个别都存在各种技术栈(React, Angular, Jq, Vue) / 同种技术栈的不同版本（Vue2, Vue3）。如果要开发某个通用组件（比方：营销弹窗），工作量就是 double+（不同技术框架须要离开开发/保护/上线，同技术不同版本可能也须要离开开发/保护/上线） 背景 2:【前端的将来】前端框架会持续迭代/倒退，会有新的版本，新的框架呈现。用 Quarkc 开发“通用型组件”，不会随着“前端框架浪潮”而更新迭代（极大升高组件研发/保护老本）。 以上背景，总结一下就是：前端的过来与将来，决定了 前端通用型组件 的开发和保护老本比拟高。 ...

Quark Design 是什么？Quark（夸克） Design 是由哈啰平台 UED 和增长&电商前端团队联结打造的一套面向挪动端的跨框架 UI 组件库。与业界第三方组件库不一样，Quark Design 底层基于 Web Components 实现，它能做到一套代码，同时运行在各类前端框架中。 Quark Design 历经一年多的开发工夫，已在团体外部大量业务中失去验证，本着“共创、共建、共享”的开源精力，咱们于即日起将 Quark 正式对外开源！Github地址：https://github.com/hellof2e/q... (求star、求关注～) 注：文档体现/款式参考了HeadlessUI/nutui/vant等。 Quark Design 与现有支流组件库的区别是什么？Quark(夸克)有别于业界支流的挪动端组件库，Quark 能同时运行在业界所有前端框架/无框架工程中，做到真正的技术栈无关 ！咱们不一样，：) 不依赖技术栈（eg. Vue、React、Angular等）不依赖技术栈版本(eg. Vue2.x、Vue3.x)全新的Api设计（eg. 弹窗的关上属性由传统的 Visible 调整为合乎浏览器原生弹窗的 open等）公司前端技术生态我的项目技术栈多时，放弃视觉/交互对立齐全笼罩您所须要的各类通用组件反对按需援用详尽的文档和示例反对定制主题性能劣势-优先逻辑无阻塞咱们以对 React 组件的 Web Components 化为例，一个一般的 React 组件在首次执行时须要一次性走完所有必须的节点逻辑，而这些逻辑的执行都同步占用在 js 的主线程上，那么当你的页面足够简单时，一些非核心逻辑就将会阻塞前面的外围逻辑的执行。 比方首次加载时，你的页面中有一个简单的交互组件，交互组件中又蕴含 N多逻辑和按钮等小组件，此时页面的首次加载不应该优先去执行这些细节逻辑，而首要任务该当是优先渲染出整体框架或外围因素，而后再次去欠缺那些不必要第一工夫实现的细节性能。 例如一些图像处理非常复杂，但你齐全没必要在第一工夫就去加载它们。 当咱们应用 Web Components 来优化 React的时候，这个执行过程将会变得简洁的多，比方咱们注册了一个简单的逻辑组件，在 React 执行时只是执行了一个 createElement 语句，创立它只须要 1-2 微秒即可实现，而真正的逻辑并不在同时执行，而是等到“外围工作”执行完再去执行，甚至你能够容许它在适合的机会再去执行。 咱们也能够简略的了解为，局部逻辑在之后进行执行而后被 render 到指定 id 的 Div 中的，那么为什么传统的组件为什么不能这么做呢？而非得 Web Components 呢？那就不得不提到它所蕴含的另一个技术个性：Shadow DOM 组件隔离（Shadow Dom）Shadow DOM 为自定义的组件提供了包含 CSS、事件的无效隔离，不再放心不同的组件之间的款式、事件净化了。 这相当于为自定义组件提供了一个人造无效的保护伞。 ...

前言通过本文，您将理解什么是Web components，以及如何将其落地到业务场景的最佳实际。 一、初识（什么是Web components） 在 html5 提供的video组件实现上采纳了Shadow DOM技术，Shadow DOM 技术是Web Components 外围套件之一，还有像input、select 也都采纳了这个技术，具体什么是Shadow DOM 会在下文中给出解释。 二、实际基于业务，咱们先看一个订单卡片的视觉稿： 用Web Components实现，代码展现如下： 这里波及到Web Components的三大技术套件 Template: 利用 Template 生成 DOM；Shadow DOM：利用Shadow DOM 来隔离CSS款式；Custom Elements: 利用Custom Elements 来自定义元素，继承自HTMLElement，HTMLElement 是 DOM API 外面的一个类，继承该类就有了html 的常见属性和 API，利用Custom Elements 来自定义元素；Template 和 Custom Elements 都比拟好了解，那什么是 Shadow DOM 呢？ 你能够简略了解为Shadow DOM 是一个独立的沙箱，与其它的DOM元素互不烦扰，能人造做到 CSS 的款式隔离！相似于 Vue 中带 Scoped 的 style 标签，它不会烦扰其它标签款式。 上面咱们来看下更具象的 <order-card /> 组件代码： 目前组件的内容是写死的，该怎么动静生成DOM呢？咱们持续往下看： 答案就是借助 Web Components 组件的生命周期来做，其中 connectedCallback 就是 dom 节点首次挂载调用，且只会调用一次，在这里能够拿到内部传入的属性。属性变更会调用 attributeChangedCallback, 在这里能够做 dom 更新相干的事件，这里不在开展，大家能够自行摸索下。 ...

attribute 和 property总结：DOM property、DOM attribute区别导致自定义标签在 Vue、React 中应用时体现不一，外围思路是做好映射关系。 React中应用 WCs 标签：const App = () => <my-cell desc='false'>Cell</my-cell>export default App;不会走到WCs的 set，因为传递的是 property。且以上传递的是一个字符串。 class MyCell extends HTMLElement { ... get desc() { return this.getAttribute('desc'); }+ set desc(value) {+ // 不会走到这里+ this.setAttribute('desc', value);+ } ...}Vue中应用 WCs 标签：<template> <my-cell desc="false">Cell</my-cell></template>会走到 set，Vue 中 desc 示意传递的是 attribute。 class MyCell extends HTMLElement { ... get desc() { return this.getAttribute('desc'); }+ set desc(value) {+ // 与React不同，Vue我的项目中应用会走到这里+ this.setAttribute('desc', value);+ } ...}如何解决？为了兼容 WCs 在 React 和 Vue 我的项目中应用一致性，须要在 WCs 外部去绑定this属性 ...

搞前端工夫比拟长的同学都会晓得一个货色，那就是HTC（HTML Components），这个货色名字很当初风行的Web Components很像，但却是不同的两个货色，它们的思路有很多类似点，然而前者已是昨日黄花，后者方兴未艾，是什么造成了它们的这种差距呢？ HTML Components的一些个性因为支流浏览器外面只有IE反对过HTC，所以很多人潜意识都认为它不规范，但其实它也是有规范文档的，而且到当初还有链接，留神它的工夫！ http://www.w3.org/TR/NOTE-HTM... 咱们来看看它次要能做什么呢？ 它能够以两种形式被引入到HTML页面中，一种是作为“行为”被附加到元素，应用CSS引入，一种是作为“组件”，扩大HTML的标签体系。 行为行为（Behavior）是在IE5中引入的一个概念，次要是为了做文档构造和行为的拆散，把行为通过相似款式的形式隔离进来，具体介绍在这里能够看： http://msdn.microsoft.com/en-... 行为里能够引入HTC文件，方才的HTC标准里就有，咱们把它摘录进去，能看得分明一些： // engine.htc<HTML xmlns:PUBLIC="urn:HTMLComponent"><PUBLIC:EVENT NAME="onResultChange" ID="eventOnResultChange" /><SCRIPT LANGUAGE="JScript">function doCalc(){ : oEvent = createEventObject(); oEvent.result = sResult; eventOnResultChange.fire (oEvent);}<HTML xmlns:LK="urn:com.microsoft.htc.samples.calc"><HEAD><STYLE> LK\:CALC { behavior:url(engine.htc); } </STYLE></HEAD><LK:CALC ID="myCalc" onResultChange="resultWindow.innerText=window.event.result"><TABLE><TR><DIV ID="resultWindow" STYLE="border: '.025cm solid gray'" ALIGN=RIGHT>0.</DIV></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 7 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 8 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 9 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" / "></TD> <TD><INPUT TYPE=BUTTON VALUE=" C "></TD></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 4 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 5 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 6 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" * "></TD> <TD><INPUT TYPE=BUTTON VALUE=" % " DISABLED></TD></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 1 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 2 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" 3 "></TD> <TD><INPUT TYPE=BUTTON VALUE=" - "></TD> <TD><INPUT TYPE=BUTTON VALUE="1/x" DISABLED></TD></TR><TR><TD><INPUT TYPE=BUTTON VALUE=" 0 "></TD> <TD><INPUT TYPE=BUTTON VALUE="+/-"></TD> <TD><INPUT TYPE=BUTTON VALUE=" . "></TD> <TD><INPUT TYPE=BUTTON VALUE=" + "></TD> <TD><INPUT TYPE=BUTTON VALUE=" = "></TD></TR></TABLE></LK:CALC></HTML>这是一个计算器的例子，咱们先大抵看一下代码构造，是不是很清晰？再看看当初用jQuery，咱们是怎么实现这种货色的：是用选择器抉择这些按钮，而后增加事件处理函数。留神你多了一步抉择的过程，而且，整个过程混淆了申明式和命令式两种代码格调。如果依照它这样，你所有的JS根本都丢在了隔离的不相干的文件中，整个是一个配置的过程，拆散得很洁净。 ...

写在后面最近致力于钻研 Web components（以下简称WC），并且也初有功效的拿到了肯定的后果，但明天想回过头来从新扫视一下 WC。 WC 到底是什么？组件是前端的倒退方向，抛开周边技术生态，单纯看 React 和 Vue 都是组件框架。 谷歌公司因为把握了 Chrome 浏览器，始终在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简略间接，合乎直觉，不必加载任何内部模块，代码量小。貌似所有完满，仿佛大有能够用来替换你喜爱的库或框架。 很多人也提出过将它与三大前端框架比拟，比方《Web Component 和类 React、Angular、Vue 组件化技术谁会成为将来？》，其实它们是两个畛域的货色，不具备可比性。WC 最大的劣势在于 CSS 防污染，浏览器原生反对的组件化实现；而 Vue 等 MVVM 框架重视数据拆散和自动化绑定的实现。且 WC 中蕴含的 4 大 web api 是标准规范，应用上滞后性（比方新落地的标准往往要等几年后才会被人拿进去应用），但 vue、react、ng 等框架不会。 目前存在的缺点与其它 web 框架一起应用存在一些小问题，会给开发体验上造成一些困扰。 1、组件外部事件的回调比方，一个弹窗组件（<my-dialog></my-dialog>）中的确定按钮，那么它的事件是如何触发的呢？ class myDialog extends HTMLElement { // ... connectedCallback() { const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <div class="dialog"> <div class="dialog-content"> <div class="dialog-body"> 弹窗内容 </div> <button id="okBtn">确定</button> </div> </div> `; shadowRoot.querySelector('#okBtn').addEventListener('click', () => { // 组件外部定义事件 this.dispatchEvent(new CustomEvent('okBtnFn')); }); }}customElements.define('my-dialog', myDialog);当初计划是 custom element 外部自定义事件 new CustomEvent()，内部用 addEventListener监听。这样的写法是很俊俏的，好像又回到了原生 JS 写利用的时代。 ...

开发中，还是会遇到须要引入内部CSS到Shadow DOM状况，那么如何解决呢？作者就最近遇到的状况给出如下几种计划。 一、@import示例代码 const template = document.createElement('template');class WhatsUp extends HTMLElement { connectedCallback() { const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innderHTML = ` <style> @import "./index.css"; // 外围代码 </style> <div>Sup</div> ` }}window.customElements.define('whats-up', WhatsUp);长处：此办法兼容性十分好，点击查看caniuse。毛病：性能 二、::part::part CSS 伪元素示意在暗影树中任何匹配 part 属性的元素。 示例代码 HTML<template id="whats-up"> <div part="sup">Sup</div> <div part="foo">Sup</div></template><whats-up></whats-up>CSSwhats-up::part(sup) { /* 款式作用于 `sup` 局部 */}whats-up::part(foo) { /* 款式作用于 `foo` 局部 */}长处：简洁明了毛病：兼容性不太好，点击查看caniuse。 三、varCSS自定义属性能够穿透到 Shadow DOM中！示例代码 JSconst template = document.createElement('template');template.innerHTML = `<style>button { background: var(--background); color: var(--color); padding: var(--padding); font-size: var(--font-size); border: 0;}</style><div>Sup</div>`;CSSwhats-up { --background: #1E88E5; --color: white; --padding: 2rem 4rem; --font-size: 1.5rem;}长处：兼容性好毛病：比拟局限，只能内部定几个，款式不能“自在翱翔” ...

1. 为什么用 shadow dom应用shadom dom能够让组件与其余组件、组件与dom树进行隔离，实现封装。 如MDN中所写： Web components 的一个重要属性是封装——能够将标记构造、款式和行为暗藏起来，并与页面上的其余代码相隔离，保障不同的局部不会混在一起，可使代码更加洁净、整洁。每一个 shadow dom 都是一个独立的、暗藏的dom树，附加在了一个元素上。 2. 在custom element中应用shadow dom接第一篇末的代码 class CommentCard extends HTMLElement{ constructor(){ super(); //将shadow dom附加在自定义元素中 let shadow = this.attachShadow({mode: 'open'}); let templateEle = document.getElementById('commentCardTemplate'); let content = templateEle.content.cloneNode(true); content.querySelector('img').src = this.dataset.avatar; content.querySelector('.nickname').innerHTML = this.dataset.nickname; //向shadow dom中追加元素 shadow.appendChild(content); }}Element.attachShadow承受一个配置对象作为参数，它蕴含一个属性 mode。当mode设置为open时，则能够从内部流动并操作shadow dom。当mode设置为closed时，内部将无法访问到shadow dom。 一般来说，我认为没有必要将mode设置为closed。即便在custom elements类定义的外部，咱们也无奈对shadow dom进行操作。这将影响咱们对custom elements的灵活处理，比方款式操作、事件绑定等。这样太不不便了。 3. 操作shadow dom通过Element.shadowRoot能够获取shadow dom的根结点。其它操作与惯例DOM操作统一。比方给某个元素增加事件绑定。 class CommentCard extends HTMLElement{ constructor(){ super(); let shadow = this.attachShadow({mode: 'open'}); let templateEle = document.getElementById('commentCardTemplate'); let content = templateEle.content.cloneNode(true); //向shadow dom中追加元素 shadow.appendChild(content); this.shadowRoot.querySelector('.nickname').addEventListener('click', (e) => { this._showBubble(e.target); }) } ...}