Macro silkenweb::custom_html_element

source ·
macro_rules! custom_html_element {
    (
        $(#[$elem_meta:meta])*
        $name:ident $( ($text_name: literal) )? = {
            $($tail:tt)*
        }
    ) => { ... };
}
Expand description

Define a custom html element.

This will define a struct for an html element, with a method for each attribute. It will also define a struct for the built element. Underscores are converted to dashes in element, attribute, and event names, and raw identifiers have their r# prefix stripped.

The html identifier can be explicitly specified in brackets after the element or attribute name. See my_explicitly_named_attribute in the example.

§Example

use silkenweb::elements::CustomEvent;

// The types of the dom element and event carry through to the event handler.
custom_html_element!(my_html_element = {
    dom_type: web_sys::HtmlDivElement;
    attributes {
        my_attribute: String,
        my_explicitly_named_attribute("MyExplicitlyNamedAttribute"): String
    };

    events {
        my_event: web_sys::MouseEvent
    };

    custom_events {
        my_custom_event: CustomEvent<web_sys::HtmlElement>,
    };
});

let elem: MyHtmlElement = my_html_element()
    .my_attribute("attribute-value")
    .on_my_event(|event: web_sys::MouseEvent, target: web_sys::HtmlDivElement| {})
    .on_my_custom_event(|event: CustomEvent<web_sys::HtmlElement>, target: web_sys::HtmlDivElement| {});