Shadow DOM 及 Custom Elements

今天发现 shadow DOM 和 自定义元素，这两个东西和 molecule 简直是同出而异名。

我得好好推敲一下，如果 shadow dom 确实能达到目的且新款浏览器都支持，molecule 就可以停止了。

---

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

https://developers.google.com/web/fundamentals/getting-started/primers/customelements

Shadow DOM 修复了 CSS 和 DOM。它在网络平台中引入作用域样式。 无需工具或命名约定，您即可使用原生 JavaScript 捆绑 CSS 和标记、隐藏实现详情以及编写独立的组件。

自定义元素提供了一种新工具，可让我们在浏览器中定义新 HTML 标记并创建可重用的组件。 将它们与 Shadow DOM 和 <template> 等新平台原语结合使用，我们可开始实现网络组件的宏大图景：

• 创建和扩展可重复使用组件的跨浏览器（网络标准）。
• 无需库或框架即可使用。原生 JS/HTML 威武！
• 提供熟悉的编程模型。仅需使用 DOM/CSS/HTML。
• 与其他网络平台功能良好匹配（Shadow DOM、<template>、CSS 自定义属性等）
• 与浏览器的 DevTools 紧密集成。
• 利用现有的无障碍功能。

 

---

结论：这套设计和 molecule 出发点是一样的。可惜走上了歪路。竟然用JS字符串写DOM，无可救药。