Web Componentization List

Componentization

• 2017-Beyond Bootstrap –moving from UI toolkit to component library: This paradigm shift allows teams of any size to create “component libraries” tailored to their exact needs and brand. Today, I’ll walk through how we got here and the process of creating your own component library.

• Removing-User-Interface-Complexity,-or-Why-React-is-Awesome

• 组件化——前端编程的选择

• 前端组件化开发方案及其在React Native中的运用

• This Is How To Get The Best Out Of Front-End Components

Web Components

• 2015-Bringing Componentization to the Web: An Overview of Web Components: we’ll address questions about our roadmap and plans for implementation.

• React and WebComponents

• Custom Elements That Work Anywhere

• The Case for Custom Elements: Part 1

• 神奇的Shadow DOM

• Web Components as successor to jQuery

Shadow DOM

• 2017-基于Shadow DOM的样式封装：Shadow DOM是Web Components标准的重要组成部分，它能够将DOM树进行隔离封装，而本文则是介绍如何利用Shadow DOM实现对于样式类的隔离封装。由于CSS并没有提供内置的模块化或者作用域机制，而在大型项目中不同组件间的样式又极易引发冲突，因此我们需要选择合适的CSS样式隔离方案。目前常用的隔离方案有BEM命名策略、IFrame、CSS Modules、CSS-in-JS等，本文首先盘点了这些方案的优势与不足；然后介绍了Shadow DOM的基本原理以及如何应用到样式封装上。