WebComponent Awesome

Spec

• WebComponents
  • CustomElementRegistry.define
  • Window.customElements
  • ShadowDOM
    • Element - attachShadow, shadowRoot, slot, assignedSlot
    • Node - getRootNode, isConnected
    • Event - composed, composedPath
  • Element
    • 生命周期
      • connectedCallback
      • disconnectedCallback
      • adoptedCallback
      • attributeChangedCallback
  • <template>, <slot>
  • CSS
    • :defined
    • :host
    • :host()
    • :host-context()

框架/库/工具

• lit/lit
• hybridsjs/hybrids
• ionic-team/stencil
  • 编译器 - 生成目标组件 - output-targets
• Custom Elements Everywhere 支持 CustomeElement、属性传递
  • React 19 custom element attributes/properties - react#11347
    • @experimental 版本 启用 - ref
  • angular,vue,preact,solidjs
  • svelte
    • Web Components with Svelte
• devpunks/snuggsi
  • ~1kb for Custom Elements
• https://open-wc.org/
• https://www.dataformsjs.com/
• https://fast.design/
• macaron-elements/macaron

组件

• dataformsjs/dataformsjs
• shoelace-style/shoelace
  • Stencil -> LitElement
    • Stencil
      • 内部文档缺失 - 对贡献不友好
      • Issues 自动关闭 - 对 Bug 不友好
      • Tree shake 问题 - #180
    • src/internal/watch.ts
• microsoft/fast

参考

• nepaul/awesome-web-components
• obetomuniz/awesome-webcomponents