WebComponent Awesome
约 1 分钟阅读
标签：资源精选
Spec
- WebComponents
CustomElementRegistry.defineWindow.customElements- ShadowDOM
- Element - attachShadow, shadowRoot, slot, assignedSlot
- Node - getRootNode, isConnected
- Event - composed, composedPath
- Element
- 生命周期
- connectedCallback
- disconnectedCallback
- adoptedCallback
- attributeChangedCallback
- 生命周期
<template>,<slot>- CSS
- ()
- ()
框架/库/工具
- lit/litGitHublit/litlit/lit · Web Components · Lit Playground · rollup.config.js · @web/dev-server · 开发环境 · esbuild + rollup · @lit-labs/react笔记：Lit
- hybridsjs/hybridsGitHubhybridsjs/hybrids
- ionic-team/stencilGitHubionic-team/stencilionic-team/stencil · Compiler for Web Components and PWAs笔记：stencil
- 编译器 - 生成目标组件 - output-targets
- Custom Elements Everywhere
支持 CustomeElement、属性传递
- React 19 custom element attributes/properties - react#11347GitHub Issuefacebook/react#11347
- @experimental 版本 启用 - refGitHub Issuefacebook/react#11347
- angular,vue,preact,solidjs
- svelte
- React 19 custom element attributes/properties - react#11347GitHub Issuefacebook/react#11347
- devpunks/snuggsiGitHubdevpunks/snuggsi
- ~1kb for Custom Elements
- open-wc.org
- www.dataformsjs.com
- fast.design
- macaron-elements/macaronGitHubmacaron-elements/macaron
组件
- dataformsjs/dataformsjsGitHubdataformsjs/dataformsjs
- shoelace-style/shoelaceGitHubshoelace-style/shoelace
- Stencil -> LitElement
- Stencil
- 内部文档缺失 - 对贡献不友好
- Issues 自动关闭 - 对 Bug 不友好
- Tree shake 问题 - #180GitHub Issueshoelace-style/shoelace#180
- src/internal/watch.tsGitHub 文件shoelace-style/shoelace/src/internal/watch.ts
- Stencil
- Stencil -> LitElement
- microsoft/fastGitHubmicrosoft/fast
参考
- nepaul/awesome-web-componentsGitHubnepaul/awesome-web-components
- obetomuniz/awesome-webcomponentsGitHubobetomuniz/awesome-webcomponents
Web Components Reference
WebComponent
- Server-side rendering web components
- MDN: Web Components
- webcomponents.org
- Can I use: Web Components链接caniuse.com基础 · 连通性 - 协议步骤 · Can I Use WebRTC · 发布记录 · WebRTC 接口 · RTCPeerConnection · 本地和远程之间的 WebRTC 连接 · RTCConfiguration 为配置对象 · RTCDataChannel - 双向的数据通道笔记：WebRTC
关联信息
反向链接、本文链接的其他页面和外部资料。
参考资料
GitHub13 条
- facebook/react#11347github.com/facebook/react/issues/11347
- dataformsjs/dataformsjsgithub.com/dataformsjs/dataformsjs
- devpunks/snuggsigithub.com/devpunks/snuggsi
- hybridsjs/hybridsgithub.com/hybridsjs/hybrids
- ionic-team/stencilgithub.com/ionic-team/stencil
- lit/litgithub.com/lit/lit
- macaron-elements/macarongithub.com/macaron-elements/macaron
- microsoft/fastgithub.com/microsoft/fast
- nepaul/awesome-web-componentsgithub.com/nepaul/awesome-web-components
- obetomuniz/awesome-webcomponentsgithub.com/obetomuniz/awesome-webcomponents
- shoelace-style/shoelacegithub.com/shoelace-style/shoelace
- shoelace-style/shoelace/src/internal/watch.tsgithub.com/shoelace-style/shoelace/blob/next/src/internal/watch.ts
- shoelace-style/shoelace#180github.com/shoelace-style/shoelace/issues/180
其他外链11 条
- developer.mozilla.org/en-US/docs/Web/Web_Componentsdeveloper.mozilla.org/en-US/docs/Web/Web_Components
- caniuse.comcaniuse.com/
- custom-elements-everywhere.comcustom-elements-everywhere.com/
- fast.designfast.design/
- medium.com/@treshugart/e5df705f3f48medium.com/@treshugart/e5df705f3f48
- open-wc.orgopen-wc.org/
- stenciljs.com/docs/output-targetsstenciljs.com/docs/output-targets
- www.abeautifulsite.net/posts/moving-from-stencil-to-lit-elementwww.abeautifulsite.net/posts/moving-from-stencil-to-lit-element
- www.dataformsjs.comwww.dataformsjs.com/
- www.thisdot.co/blog/web-components-with-sveltewww.thisdot.co/blog/web-components-with-svelte
- www.webcomponents.orgwww.webcomponents.org/