Trait custom_elements::CustomElement

pub trait CustomElement: Default + 'static {
    // Required method
    fn inject_children(&mut self, this: &HtmlElement);

    // Provided methods
    fn shadow() -> bool { ... }
    fn observed_attributes() -> &'static [&'static str] { ... }
    fn constructor(&mut self, _this: &HtmlElement) { ... }
    fn connected_callback(&mut self, _this: &HtmlElement) { ... }
    fn disconnected_callback(&mut self, _this: &HtmlElement) { ... }
    fn adopted_callback(&mut self, _this: &HtmlElement) { ... }
    fn attribute_changed_callback(
        &mut self,
        _this: &HtmlElement,
        _name: String,
        _old_value: Option<String>,
        _new_value: Option<String>
    ) { ... }
    fn superclass() -> (Option<&'static str>, &'static Function) { ... }
    fn define(tag_name: &'static str) { ... }
}

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

Note that your component should implement Default, which allows the browser to initialize a “default” blank component when a new custom element node is created.

Required Methods

fn inject_children(&mut self, this: &HtmlElement)

Appends children to the root element, either to the shadow root in shadow mode or to the custom element itself. Per the Web Components spec, this is deferred to the first invocation of connectedCallback(). It will run before connected_callback.

Provided Methods

fn shadow() -> bool

Whether a Shadow root should be attached to the element or not. Shadow DOM encapsulates styles, but makes some DOM manipulation more difficult.

Defaults to true.

fn observed_attributes() -> &'static [&'static str]

The names of the attributes whose changes should be observed. If an attribute name is in this list, attribute_changed_callback will be invoked when it changes. If it is not, nothing will happen when the DOM attribute changes.

fn constructor(&mut self, _this: &HtmlElement)

Invoked when the custom element is instantiated. This can be used to inject any code into the constructor, immediately after it calls super().

fn connected_callback(&mut self, _this: &HtmlElement)

Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element’s contents have been fully parsed.

fn disconnected_callback(&mut self, _this: &HtmlElement)

Invoked each time the custom element is disconnected from the document’s DOM.

fn adopted_callback(&mut self, _this: &HtmlElement)

Invoked each time the custom element is moved to a new document.

fn attribute_changed_callback( &mut self, _this: &HtmlElement, _name: String, _old_value: Option<String>, _new_value: Option<String> )

Invoked each time one of the custom element’s attributes is added, removed, or changed. To observe an attribute, include it in observed_attributes.

fn superclass() -> (Option<&'static str>, &'static Function)

Specifies the built-in element your element inherits from, if any, by giving its tag name and constructor. This is only relevant to customized built-in elements, not autonomous custom elements. Browser support is inconsistent.

Defaults to the equivalent of extends HTMLElement, which makes for an autonomous custom element.

To specify your own superclass, import it using wasm_bindgen:

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_name = HTMLParagraphElement, js_namespace = window)]
    pub static HtmlParagraphElementConstructor: js_sys::Function;
}
impl CustomElement for MyComponent {
    fn superclass() -> (Option<&'static str>, &'static js_sys::Function) {
        (Some("p"), &HtmlParagraphElementConstructor)
    }
}

fn define(tag_name: &'static str)

Must be called somewhere to define the custom element and register it with the DOM Custom Elements Registry.

Note that custom element names must contain a hyphen.

impl CustomElement for MyCustomElement { /* ... */  */}
#[wasm_bindgen]
pub fn define_elements() {
    MyCustomElement::define("my-component");
}

Object Safety

This trait is not object safe.

Implementors