原来小程序用的是webComponent，控制台满屏的“#shadow-root”

web component是通过浏览器引擎提供api接口进行操作，让后在dom，cssom生成过程中控制实现组件化的作用域/执行执行上下文的隔离； vue/react 是在没有浏览器引擎支持的情况下，通过采取一些取巧的手法（比如：js执行上下文的封装利用闭包；样式的封装利用文件hash值作为命名空间在css选择的时候多套一层选择条件（hash值），本质上还是全局的只是不同组件css选择的时候只能选择到组件相应的css样式，实现的隔离）

Vue，React是从开发者层面解决了组件化的问题，提高了效率。WebComponent是从浏览器引擎实现层面解决了组件化的问题，从社区来看，前者的发展优势更明显

shadow dom 中的style使用rem，r是相对的html的font-size 这点很坑

在回答课后题的过程中我又想到一个问题：文中讲述了WebComponent对cssom， dom的隔离，没有谈到对WebComponent中的js作用域的隔离，老师能具体讲讲js的作用域在web component的实现中是怎么实现隔离的呢？

有个疑问，“影子 DOM 中的元素对于整个网页是不可见的”，那么“再将模板添加到影子 DOM 上”，不还是看不见吗？也就是虽然我们组件化了，但是这个组件我们看不见？这样看不见的组件有什么使用意义吗？

vue/react的出现一个目的就是解决前端组件化，WebComponents也是在组件化的思想下产生的。有点像“开局就送vip，一刀999“的感觉，这样后期框架在基于WebComponents演进的过程中，会有更好的体验，自然也要求WebComponents不断的完善。

React Vue 的出现是为了解决包括 WebComponent 想解决的问题在内的很多 web 开发的痛点，在单纯组件化方面 他们采取了各自的解决方案，我觉得 webcomponent 应该考虑借鉴流行度高的框架的实现。

vue中的单组件和react组件类似webcomponent,dom和css隔离。vue和react是通过框架层面实现了组件化

个有问题, webComponent提供了封装但这组件怎么被引用用到其他html中,

Web Component 和 Vue 组件化开发方式相似，React 世界里一切都可以是js，css-in-js 方案，相比 Vue，React，Web Component 更具纯粹，不需要任何外库，缺点是用的人太少，相关生态（组件库）几乎没有

angular js里的directive应该也是用webcomponent实现的吧？一直挺好奇它的实现方式的。今天懂了

react和vue通过scoped css来声明样式的局部性.通过给当前root元素添加一个hashed id, 其样式在当前id范围内。
而angular是shadow dom实现的

web-component之于vue/react，类似于ES6789之于coffeeScript/typeScript，后者只是前者的临时替补，omi和angular都已经支持web-component