Web Components 相关链接

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

  • GitHub 如何使用 Web Components — Kristján Oddsson 谈论了 GitHub 如何使用 Web Components。我记得他们是 Web Components 的早期采用者,这里提到他们在 2014 年发布了一个 <relative-time> 组件!现在他们有一大堆 开源组件。所以 易于使用!太棒了!我想看看他们的 HTML 并实际体验一下,所以我查看了源代码并使用了正则表达式 (<\w+-[\w|-|]+.*>)(感谢 Andrew)来查找它们。七个 在登录后的主页上,所以他们不是在吹牛。
  • 使用 Web Components 封装 CSS 并解决设计系统冲突 — Tyler Williams 说 Web Components 的封装(Shadow DOM)意味着避免与旧的 CSS 系统发生样式冲突。他还证明了为 Git 存储库创建网站的公司喜欢使用 Web Components。
  • Web Components 中的容器查询 — Max Böck 分享说 Web Components 的 :host 可以作为 @container,这非常棒,并且绝对是所有 Web Components 应该如何编写的。
  • 使用 Web Components 加速集成 — Jason Grigsby 从事客户工作,他说 Web Components 不仅使集成变得快速,还使集成变得简单
  • FicusJS — 我记得曾经有人告诉我,原生 Web Components 并不是真正意义上的“原始”使用,而是作为低级组件,以便在其基础上构建工具。我们在渲染器之间的竞争中看到了这一点,例如 lit-htmlhtm。然后,在更高级别的工具中,例如这里的 Ficus,它添加了许多花哨的功能,如状态、方法和事件。
  • Shadow DOM 及其对非官方样式 API 的影响 — Jim Nielsen 扩展了 我在 ShopTalk 上谈到的想法,即DOM 就是样式 API。它在某种程度上是自文档化的。“作为作者,您必须花费时间和精力来思考、设计,然后为您的组件编写样式 API 文档。作为使用者,您必须阅读、理解并实现该 API。”是的。这就是为什么对我来说,感觉像是一个好主意,能够以一种不受限制的方式“从外部 CSS 访问 Shadow DOM”。
  • 优秀的独立组件 — 我认为 Dave 在这里列出的内容正是让开发人员开始接触并思考 Web Components 实际用途的东西。

两年前,仍然适用