无框架，跨框架！时隔两年，哈啰Quark Design迎来重大特性升级！

引言

历经1年多迭代，Quarkd 2.0 版本正式发布，这是自 Quarkd 开源以来第二个重大版本。本次升级主要实现了组件外部可以穿透影子Dom，修改组件内部元素的任何样式。

• 
  
• （迁移后）最新官网：quark-ecosystem.github.io/quarkd-docs
  
• Github 地址：github.com/hellof2e/qu…
  

Quark Design 介绍

Quark（夸克） Design 是由哈啰平台 UED 和增长&电商前端团队联合打造的一套面向移动端的跨框架 UI 组件库。与业界第三方组件库不一样，Quark Design 底层基于 Web Components 实现，它能做到一套代码，同时运行在各类前端框架/无框架中。

前端各类框架技术发展多年，很多公司存量前端项目中必定存在各类技术栈。为了解决各类不同技术栈下UI交互统一，我们开发了这套UI组件库。

之前技术瓶颈

熟悉 quarkd 的开发者都知道其底层基因是 Web Components，从而实现了跨技术栈使用。但Web Components 中的 shadow dom 特性决定了其“孤岛”的特性，组件内部是个独立于外部的小世界，外部无法修改组件内部样式，若要修改内部样式，我们在 quarkd 1.x 版本中采用了 CSS 变量的方式来支援这种做法。

但这种做法依旧局限性非常大，你只能修改预设css变量的指定样式，比如你要修改 Dialog 内容中的字体大小/颜色：

// 使用组件
<quark-dialog class=“dialog” content="生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。"></quark-dialog>


// 内部css源码

:host .quark-dialog-content {

    font-size: var(--dialog-content-font-size, 14px);

    color: var(--dialog-content-color, "#5A6066");

    // ... 其它样式

}

这时候，你需要在组件外部书写：

.dialog {
--dialog-content-font-size: 36px;
--dialog-content-color: red;

}

这种做法会带来一些问题，比如当源码中没有指定的css变量，就意味着你无法通过css变量从外面渗透进入组件内部去修改，比如 dialog conent 内的 font-style。

升级后

得益于 ::part CSS 伪元素的特性， 我们将 Quarkd 主要 dom 节点进行改造，升级后，你可以通过如下方式来自定义任何组件样式。

custom-element::part(foo) {
/* 样式作用于 `foo` 部分 */

}

::part 可以用来表示在阴影树中任何匹配 part 属性的元素。

该特性已兼容主流浏览器，详情见：mozilla.org # ::part()

用法示例：

// 使用组件
<quark-dialog class=“dialog” content="生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。"></quark-dialog>


.dialog::part(body) {

    font-size: 24px;

    color: #666;

}

.dialog::part(footer) {

    font-size: 14px;

    color: #333;

}

其它DEMO地址：stackblitz.com/edit/quarkd…

关于升级

Quarkd 2.x 向下兼容所有 1.x 功能及特性，之前的css变量也被保留，所以使用者可以从1.x直接升级到2.x！

One more thing

假如你也想利用 quarkd 底层能力构建属于自己的跨技术栈组件，欢迎使用：
github.com/hellof2e/qu…

Online demo by StackBlitz

最后

感谢在Quarkd迭代期间作出贡献的朋友们，感谢所有使用quarkd的开发者！