sdk component setup无法勾选installed_为什么使用 web-component？

halo 大家好，我是 132，今天给大家带来一篇水文……主要讲讲有关于 web-component 相关

框架作者的本职工作

——就是瞎扯

每一种机制，都有它最合适的 case，也有对应的缺点……框架作者就是负责将多个合适的机制组合在一起，然后疯狂遍理由，吹优点，然后缺点就说可以接受，最终加一个渐进式的形容词

所以 web-component 也一样，它没有得天独厚的致命优势，也没有致命缺点，说白了从必要性来说，web-component 和 pwa 都是鸡肋

因为我在写 pua 小程序引擎的时候同时使用了 web-component 和 pwa，我决定编一些理由来支撑我的这些抉择

dom 结构

其实我经常食用 shadow dom，比如 ep，berial，都有用到

比如上面是 ep 的 dom 结构，一个组件下面有 style 代码块和 main 代码块，我认为这种按照组件拆分 dom 的组织方式天生就方便调试，也方便框架内部操作，也长得好看

想一想如果不用 web-component，你只能把 js 和 css 打包到 body 上面，如果只有一个文件（经过 webpack 打包）那还行，如果没有打包，可想而知会多么乱

voe-ide 不使用 webpack，而是使用了类似 deku 和 vite 的思路

所以综上所述，舍弃掉 webpack 的小程序 ide，自然得靠 web-component 去优化 dom 结构

（关于 ide 的部分，我之后会写文章单独分析，包括 ide 的开发环境，https，打包上传 serverless 等等）

自带 runtime，用于减少框架尺寸

因为说实话，小程序引擎是有一个 vue-like 框架的，这部分如果真的使用和 vue 对等的机制，是不可能做到 1kb 的……至少多出来一个 template compiler

想象一下下面的代码：

define({
  setup(){
    const msg = useData("hello world");
    useMount(() => console.log('mount'))
    return { msg }
  },
  tag: "my-component",
  template: `<div class="msg">{{msg}}<div>`,
  style: `.msg{color:#333}`
})

如果是在 web-component 内部，则可以被直接使用

function define({tag,style,template,setup}){
  customElements.define(
    tag,
    class extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: "open" })
        const css = document.createElement('style')
        css.innerHtml = style
        this.shadowRoot.appendChild(css)
      }
      connectedCallback() {
        mount()
      }
      disconnectedCallback() {
        unmount()
      }
    }
  )
}

这样以来，至少 style 不需要打包，生命周期也可以直接使用 web component 自带的生命周期去执行了

甚至还可以做 props 的双向绑定，从而使得 vdom 变得更加纯粹（只有 tag 没有 function）

当然，注意前提是小程序平台，没有 webpack，框架核心也追求简单，不需要时间切片，不需要太骚的 API

scoped css

这个算是 web-component 的优势，但我还是把它放到最后一点，因为所有的优点都是有成本的，比如穿透 css 就是世纪难题

我个人认为 css 问题永远都不是问题，无论是样式污染还是样式无法穿透，css 至少不会让页面崩掉

总结

其实在此之前，web component 真的很多了，ep，berial，甚至 omijs，stencil，甚至微信小程序本身就是 web component

但还是那句话，不同的机制有不同的适用场景，比如 fre 我就不会使用 web component