w3c，google什么的都突然有一天发现。iphone一出，我们的数钱数得手抽筋的好日子是快完了吧。以后感觉没web什么事了额。。。。。砸帅哥，霉女一见面都问装啥app，都不用电脑，笔记本，更谈不上看网页了呢。。。。
　　gg一想，"不行啊"，然后google买了android，"还是不行啊，我现在这么容易挣这么多钱，我就是把android养大了也不见得挣现在这么多钱额。我还是得把web这块保住啊”，w3c赶紧附和道：“对，对，对”。然后大家都知道了chrome 拼命刷版本从1~47没用几年吧。。。。web的规范是一波波的出啊， es4,5,6,7全出来了。
　　然后就有了web component横空出世，带着四个小弟shadow dom/custom element/template/import。

　　这回组件化的卷子又有什么不同呢？
　　学校太差要被撤，学霸学渣站一条线上了，即然大家都要完，我们一起拼一把吧。
　　“好”：学霸，学渣异口同声
　　然后学霸帮学渣把卷子都做好了，然后对学渣说：“哥，你写上你名字吧！“

　　这次的组件化完完全全不一样了，custom element的出来的组件，可以是以前任意的东西，然后注册成任意一个名字的组件，可以就<niubi-xxxcomponent>，也可叫<my-cat>，反正你想叫啥，就叫啥，然后小伙伴(host)把你的组件(element)直接import进去了以后，完全不会影响大家的开发。注意，是完全不会影响，css只是组件局部，js也是只管自己的。终于实现了大家一起出力，各干各的，完全不会相互影响。。。。这可是真正的齐头并进啊。

来个例子：

<link rel="import" href="banner.html">
<link rel="import" href="phones.html">
<link rel="import" href="list.html">
<template name="t-listBox"><t-banner></t-banner><t-phone></t-phone><t-list></t-list>
</template>

这是前端代码么，怎么这么少。。。。。
这可是妥妥一个完整的界面啊，有banner，电话输入框，和电话列表啊。
　　这是要闹那样，代码往那里写，代码往那里写啊。。。。
　　这正是奥妙之所在，可以三个同学同时写<t-banner><t-phone><t-list>三个组件，然后直接import进来以后就可以直接用了。。。
高内聚，低耦合
~bingo~
世界顿时好美好 T_T

但是。。。
但是。。。
但是。。。

但是一般都是是故事的。。。。这规范到不成熟，到处是坑啊，我会跟你说么 T_T

说个简单的，这一个个组件都是独立的，那样式不受外部影响，通用的样式怎么办。。。。。怎么办啊，难道一个个组件去改么。。。
我不会告诉你，有::shadow和/deep/这么奇怪的选择器，而且没用几天就被deprecated(废止)了，虽然现在还能用，但是不知道那一天取消支持，这也太让人忐忑了。

当然，组件化的时代已经开启，为了填原生的坑，已经有无数勇士已经又踩着前者的尸体冲上来了

他们是：

Angular Directives
Ember Components
React Components
KnockoutJS Components
Vue.js Components
Backbone Components
CanJS Components
Famous Components
Anything.JS Components?