Crate custom_elements

The Web Components standard creates a browser feature that allows you to create reusable components, called Custom Elements.

While web_sys exposes the browser’s CustomElementRegistry interface, it can be hard to use. Creating a Custom Element requires calling customElements.define() and passing it an ES2015 class that extends HTMLElement, which is not currently possible to do directly from Rust.

This crate provides a CustomElement trait that, when implemented, allows you to encapsulate any Rust structure as a reusable web component without writing any JavaScript. In theory it should be usable with any Rust front-end framework.

impl CustomElement for MyWebComponent {
    fn to_node(&mut self) -> Node {
        self.view()
    }

    fn observed_attributes() -> Vec<&'static str> {
        vec!["name"]
    }

    fn attribute_changed_callback(
        &self,
        this: &HtmlElement,
        name: String,
        old_value: Option<String>,
        new_value: Option<String>,
    ) {
        if name == "name" {
            // do something
        }
    }
}

#[wasm_bindgen]
pub fn define_custom_elements() {
    MyWebComponent::define("my-component");
}

Traits

CustomElement

A custom DOM element that can be reused via the Web Components/Custom Elements standard.