custom-element

概述

自定义元素是什么/什么是 Web 组件？

首先，“Web 组件”只是自定义元素的另一个名称。正如 Jake Lazaroff 所说：

它们是一组 W3C 标准，用于构建可重用的 HTML 元素。您通过编写一个自定义元素的类、注册一个标签名并在您的标记中使用它来使用它们。

对我们来说，这意味着我们可以使用 Rust 在浏览器中运行 HTML 元素，而页面上的其他元素不需要知道这一点！这是在 HTML/JS/CSS 和 Rust/Wasm 之间架起桥梁的一种很好的方式。作为 UI/库作者，您可以利用 JS/HTML 的所有灵活性，同时在需要时随时获得 Rust 的所有工具/性能/安全性。

问题

目前，wasm-bindgen 不支持从 Rust/Wasm 扩展 JS 类：https://github.com/rustwasm/wasm-bindgen/issues/210，https://github.com/rustwasm/wasm-bindgen/issues/210。然而，此功能对于在网络上创建自定义元素是必不可少的，因为自定义元素必须从 HTMLElement 继承（或 HTMLElement 的其他有效子类）。

解决方案

此包提供了扩展任意 HTMLElement 子类的 JavaScript 代理所需的 JavaScript 模拟器，并将所有自定义元素生命周期方法调用转发到您提供的 Rust 结构。

为什么是这个包而不是其他可用的包？

• 允许创建 自主自定义元素和定制内置元素

• 提供了创建定制内置元素的所有有效 HtmlElement 构造函数——这些构造函数不是由 wasm-bindgen 默认提供的，并且不明显如何访问它们。

• 包含简单的示例，可以直接复制到您的项目中，以及更高级的示例，展示如何使用此库封装 Leptos 组件（例如）并从 JavaScript/React 中渲染它们

• 创建自定义元素的更少意见的方法。此库为您提供了围绕您的结构包装类的 JavaScript 构造函数，您决定如何使用它。

当前粗糙边缘

• 如果在调用自定义元素时同时使用 &mut 和 & 指针，可能会遇到以下问题：https://github.com/rustwasm/wasm-bindgen/issues/1578。我知道的绕过这个问题的方法包括：将自定义元素实例的可变调用安排在当前函数作用域结束后进行，或者通过添加一些中间层，使用 Rc<RefCell<T>> 来实现。如果您有其他减少此问题的想法，我愿意看到您的消息或PR。

其他您可能感兴趣的库

• custom-elements - 启发这个库的库
• webcomponents - 一种不使用 wasm-bindgen 的不同实现方法