Mozilla Brick：一个Web组件Polyfill库

Posted 2020-06-13

Web组件是一个W3C规范，它旨在使Web开发人员能够定义具有非常丰富的视觉效果和高可交互性且易于组合的小组件。Brick库提供了新的自定义html标签，从而抽象了用户常用接口模式。在浏览器本身支持类似标签之前，开发人员可以使用Brick。

Brick基于Mozilla的X-Tag polyfill库，因此，要运行依赖任何Brick标签的代码，开发人员需要先将window.onload替换为x-tags库的“DOMComponentsLoaded”事件:

document.addEventListener(‘DOMComponentsLoaded‘, function(){   
// 在这里添加可运行代码... 
});

在写作本文的时候，Brick包含13个不同的标签（“bricks”），它们中的大部分都完全相互独立，甚至可以分别下载，而不是一起打包下载：

1. “导航栏（Appbar）”
2. “日历（Calendar）”
3. “日期选择器（Datepicker）”
4. “面板（Deck）”
5. “翻转框（Flipbox）”
6. “图标按钮（Iconbutton）”
7. “布局（Layout）”
8. “滚动框（Slidebox）”
9. “滚动条（Slider）”
10. “选项卡（Tabbar）”
11. “开关（Toggle）”
12. “开关组（Togglegroup）”
13. “提示框（Tooltip）”

下面是日历标签的样子：

<x-calendar></x-calendar> 

Google非常信任Web组件，它也正在开发一个名为Polymer的Web组件polyfill库，该库试图在现有的浏览器基本结构上充分利用“影子DOM（Shadow DOM）”、“自定义元素（Custom Elements）”和“模型驱动视图（Model Driven Vies）”等未来技术。

值得一提的是，虽然在过去的一年里Web组件的发展势头看上去很好，但是Web组件规范变化很快，还有许多方面不确定。几周前，来自Google的Dimitri Glazkov在W3C邮件列表中提议，从规范中删除<element>元素。关于这一点，他们一致认为， 已拟定的<element>元素语法不够好，在实现标准化之前，应该把这个问题留给各实现库来探索，正如来自Apollo Group的Brian Kardell所说：

像x-tags和polymer这样的项目，甚至是像Ember和Angular这样的项目，要给他们机会，让他们带头提出那些问题并帮忙给出具有潜在竞争力的答案——在我看来，没有必要急于在这一点上进行高层次的标准化。