stencil是什么

stencile是啥

在认识stencil之前、我们需要先了解什么是web components , 其实就是h5的自定义组件的方式详情 、在h5里面其实有很多都是自定义元素组件、比如video、input等等…, 那我们怎么去看一个元素的自定义组件的节点详情呢(默认是看不到的)、 f12点击右上角三个点、点击设置图标找到 show use agent shaow Dom 勾选上

然后你在选中video标签、你会发现你就能够看到video的元素节点了

自定义元素好处

• 集成到任意框架使用
• 彻底隔离自定义组件样式和方法
• 组件模块化

  stencil

  我们都知道web components是支持class和构造方法来定义的案例、但是也存在一些不友好的地方、那就是太原生了、我们常年通过各种框架快速开发一些应用习惯了、导致原生写起来不是特别顺手、而且自己写的轮子也不好用、所以stencil就来了、他是一个web components框架、里面内置了 TS 来使用的是JSX语法写页面(类似react)、相对来说更符合我们常年使用框架的选手、文档简洁明了! 内置了一些好用的API包括各个阶段的生命周期处理!相对来说比较完善!