能否为DOM中的HTMLElement添加自定义属性并保障其生命周期？

核心结论 #

直接给HTMLElement添加自定义属性（比如你用的__my_custom_property）是完全可行的，浏览器不会在元素被垃圾回收前私自移除这类属性。只要元素还存在于内存中，你的自定义属性就会一直保留；当元素被垃圾回收后，若my_obj没有其他引用，也会随之被回收。

针对当前实现的优化建议 #

你的现有写法没问题，但可以通过Symbol作为属性名避免命名冲突（防止和其他代码、框架的自定义属性重名）：

const MY_CUSTOM_PROPERTY = Symbol('my_custom_prop');
const el = document.createElement("div");
el[MY_CUSTOM_PROPERTY] = my_obj;
document.body.appendChild(el);

Symbol作为唯一标识，不会和任何字符串属性名冲突，更安全。

Rust WASM场景的弱引用处理方案 #

要避免循环引用导致节点无法释放，你需要让元素持有对象的强引用（保证对象生命周期和元素一致），同时对象持有元素的弱引用（避免阻止元素被垃圾回收）。

用wasm-bindgen的话，可以通过JsWeak实现弱引用：

use wasm_bindgen::{JsCast, JsValue};
use web_sys::HtmlElement;

// 假设你已经创建了HtmlElement实例el，以及需要绑定的Rust对象（包装为JsValue）my_obj
// 1. 给元素添加自定义属性，持有对象的强引用
let el_js: JsValue = el.dyn_into().unwrap();
el_js.set_property("__my_wasm_obj", &my_obj).unwrap();

// 2. 让对象持有元素的弱引用，用于后续更新节点
let weak_el = el_js.downgrade();
// 将weak_el存储到你的Rust对象中，后续需要更新节点时，先尝试升级弱引用
if let Some(el) = weak_el.upgrade().and_then(|v| v.dyn_into::<HtmlElement>().ok()) {
    // 在这里更新节点属性，比如修改文本内容
    el.set_text_content(Some("更新后的内容"));
}

这样设计的好处：

• 元素的强引用保证对象不会被提前回收，生命周期和元素绑定
• 对象持有的弱引用不会阻止元素被垃圾回收，彻底避免循环引用
• 当元素被移除并回收后，weak_el.upgrade()会返回None，此时你可以安全地停止对该节点的更新逻辑

关键注意事项 #

• 不要使用DOM标准属性名作为自定义属性（比如id、class），避免覆盖原生行为
• 若使用字符串作为自定义属性名，建议加上独特前缀（比如你的项目标识），降低冲突概率
• 在Rust WASM中，确保my_obj没有其他外部强引用，否则即使元素被回收，对象也可能无法被释放

内容的提问来源于stack exchange，提问作者Filipe Rodrigues