分类：web-components

去年 10 月，咱们对外开源了 Quarkd（quark design 缩写）。开源之初，咱们给本人定下 star 数量超过 70 个就行的心态，却意外失去了 1600 多 star，很受鼓励...

Quark（夸克） Design 是由哈啰平台 UED 和增长&电商前端团队联结打造的一套面向挪动端的跨框架 UI 组件库。与业界第三方组件库不一样，Quark Design 底层基...

在 html5 提供的video组件实现上采纳了Shadow DOM技术，Shadow DOM 技术是Web Components 外围套件之一，还有像input、select 也都采纳了这个技术，具体什么是Shadow DOM 会在下文中给出解释。

总结：DOM property、DOM attribute区别导致自定义标签在 Vue、React 中应用时体现不一，外围思路是做好映射关系。

搞前端工夫比拟长的同学都会晓得一个货色，那就是HTC（HTML Components），这个货色名字很当初风行的Web Components很像，但却是不同的两个货色，它们的思路有很多类似点，然而前者已是昨日黄花，后者方兴未艾，是什么造成了它们的这种差距呢？

谷歌公司因为把握了 Chrome 浏览器，始终在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简略间接，合乎直觉，不必加载任何内部模块，代码量小。貌似所有完满，仿佛大有能够用来替换你喜爱的库或框架。

开发中，还是会遇到须要引入内部CSS到Shadow DOM状况，那么如何解决呢？作者就最近遇到的状况给出如下几种计划。一、@import示例代码 {代码...} 长处：此办法兼容性十分好，点击查看caniuse。毛病：性能二、::part::part CSS 伪元素示意在暗影树中任何匹配 part 属性的元素。示例代码HTML {代码...} CSS {代码...} 长处...

Web components 的一个重要属性是封装——能够将标记构造、款式和行为暗藏起来，并与页面上的其余代码相隔离，保障不同的局部不会混在一起，可使代码更加洁净、整洁。