yew/docs/concepts/html/elements.md

id	title	description
elements	Elements	Both HTML and SVG elements are supported

Tag Structure

Element tags must either self-close <... /> or have a corresponding close tag for each open tag

html! {
  <div id="my_div"></div>
}

html! {
  <div id="my_div"> // <- MISSING CLOSE TAG
}

html! {
  <input id="my_input" />
}

html! {
  <input id="my_input"> // <- MISSING SELF-CLOSE
}

:::note For convenience, elements which usually require a closing tag are allowed to self-close. For example, writing html! { <div class="placeholder" /> } is valid. :::

Children

Create complex nested HTML and SVG layouts with ease:

html! {
    <div>
        <div data-key="abc"></div>
        <div class="parent">
            <span class="child" value="anything"></span>
            <label for="first-name">{ "First Name" }</label>
            <input type="text" id="first-name" value="placeholder" />
            <input type="checkbox" checked=true />
            <textarea value="write a story" />
            <select name="status">
                <option selected=true disabled=false value="">{ "Selected" }</option>
                <option selected=false disabled=true value="">{ "Unselected" }</option>
            </select>
        </div>
    </div>
}

html! {
    <svg width="149" height="147" viewBox="0 0 149 147" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M60.5776 13.8268L51.8673 42.6431L77.7475 37.331L60.5776 13.8268Z" fill="#DEB819"/>
        <path d="M108.361 94.9937L138.708 90.686L115.342 69.8642" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <g filter="url(#filter0_d)">
            <circle cx="75.3326" cy="73.4918" r="55" fill="#FDD630"/>
            <circle cx="75.3326" cy="73.4918" r="52.5" stroke="black" stroke-width="5"/>
        </g>
        <circle cx="71" cy="99" r="5" fill="white" fill-opacity="0.75" stroke="black" stroke-width="3"/>
        <defs>
            <filter id="filter0_d" x="16.3326" y="18.4918" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feGaussianBlur stdDeviation="2"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
            </filter>
        </defs>
    </svg>
}

Classes

There are a number of convenient ways to specify classes for an element:

html! {
  <div class="container"></div>
}

html! {
  <div class="container center-align"></div>
}

html! {
  <div class=format!("{}-container", size)></div>
}

html! {
  <div class=self.classes()></div>
}

html! {
  <div class=("class-1", "class-2")></div>
}

html! {
  <div class=vec!["class-1", "class-2"]></div>
}

Listeners

Listener attributes need to be passed a Callback which is a wrapper around a closure. How you create your callback depends on how you wish your app to react to a listener event:

struct MyComponent {
    link: ComponentLink<Self>,
}

enum Msg {
    Click,
}

impl Component for MyComponent {
    type Message = Msg;
    type Properties = ();

    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        MyComponent { link }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::Click => {
                // Handle Click
            }
        }
    }

    fn view(&self) -> Html {
        // Create a callback from a component link to handle it in a component
        let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);
        html! {
            <button onclick=click_callback>
                { "Click me!" }
            </button>
        }
    }
}

struct MyComponent {
    worker: Dispatcher<MyWorker>,
}

impl Component for MyComponent {
    type Message = ();
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        MyComponent {
            worker: MyWorker::dispatcher()
        }
    }

    fn update(&mut self, _: Self::Message) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        // Create a callback from a worker to handle it in another context
        let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);
        html! {
            <button onclick=click_callback>
                { "Click me!" }
            </button>
        }
    }
}

struct MyComponent;

impl Component for MyComponent {
    type Message = ();
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        MyComponent
    }

    fn update(&mut self, _: Self::Message) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        // Create an ephemeral callback
        let click_callback = Callback::from(|| {
            ConsoleService::new().log("clicked!");
        });

        html! {
            <button onclick=click_callback>
                { "Click me!" }
            </button>
        }
    }
}

Event Types

:::note In the following table web-sys's event types should only be used if you're using yew with web-sys (this is enabled by default). Use stdweb's event types if you're using the yew-stdweb crate. See the documentation page about whether to choose web-sys or stdweb for more information. :::

:::note All the event types mentioned in the following table are re-exported under yew::events. Using the types from yew::events makes it easier to ensure version compatibility than if you were to manually include web-sys or stdweb as dependencies in your crate because you won't end up using a version which conflicts with the version Yew specifies. :::

Event name	web_sys Event Type	stdweb Event Type
onabort	Event	ResourceAbortEvent
onauxclick	MouseEvent	AuxClickEvent
onblur	FocusEvent	BlurEvent
oncancel	Event	Unsupported
oncanplay	Event	Unsupported
oncanplaythrough	Event	Unsupported
onchange	ChangeData	ChangeData
onclick	MouseEvent	ClickEvent
onclose	Event	Unsupported
oncontextmenu	MouseEvent	ContextMenuEvent
oncuechange	Event	Unsupported
ondblclick	MouseEvent	DoubleClickEvent
ondrag	DragEvent	DragEvent
ondragend	DragEvent	DragEndEvent
ondragenter	DragEvent	DragEnterEvent
ondragexit	DragEvent	DragExitEvent
ondragleave	DragEvent	DragLeaveEvent
ondragover	DragEvent	DragOverEvent
ondragstart	DragEvent	DragStartEvent
ondrop	DragEvent	DragDropEvent
ondurationchange	Event	Unsupported
onemptied	Event	Unsupported
onended	Event	Unsupported
onerror	Event	ResourceErrorEvent
onfocus	FocusEvent	FocusEvent
onformdata	Event	Unsupported
oninput	InputData	InputData
oninvalid	Event	Unsupported
onkeydown	KeyboardEvent	KeyDownEvent
onkeypress	KeyboardEvent	KeyPressEvent
onkeyup	KeyboardEvent	KeyUpEvent
onload	Event	ResourceLoadEvent
onloadeddata	Event	Unsupported
onloadedmetadata	Event	Unsupported
onloadstart	ProgressEvent	LoadStartEvent
onmousedown	MouseEvent	MouseDownEvent
onmouseenter	MouseEvent	MouseEnterEvent
onmouseleave	MouseEvent	MouseLeaveEvent
onmousemove	MouseEvent	MouseMoveEvent
onmouseout	MouseEvent	MouseOutEvent
onmouseover	MouseEvent	MouseOverEvent
onmouseup	MouseEvent	MouseUpEvent
onpause	Event	Unsupported
onplay	Event	Unsupported
onplaying	Event	Unsupported
onprogress	ProgressEvent	ProgressEvent
onratechange	Event	Unsupported
onreset	Event	Unsupported
onresize	Event	ResizeEvent
onscroll	Event	ScrollEvent
onsecuritypolicyviolation	Event	Unsupported
onseeked	Event	Unsupported
onseeking	Event	Unsupported
onselect	Event	Unsupported
onslotchange	Event	SlotChangeEvent
onstalled	Event	Unsupported
onsubmit	FocusEvent	SubmitEvent
onsuspend	Event	Unsupported
ontimeupdate	Event	Unsupported
ontoggle	Event	Unsupported
onvolumechange	Event	Unsupported
onwaiting	Event	Unsupported
onwheel	WheelEvent	MouseWheelEvent
oncopy	Event	Unsupported
oncut	Event	Unsupported
onpaste	Event	Unsupported
onanimationcancel	AnimationEvent	Unsupported
onanimationend	AnimationEvent	Unsupported
onanimationiteration	AnimationEvent	Unsupported
onanimationstart	AnimationEvent	Unsupported
ongotpointercapture	PointerEvent	GotPointerCaptureEvent
onloadend	ProgressEvent	LoadEndEvent
onlostpointercapture	PointerEvent	LostPointerCaptureEvent
onpointercancel	PointerEvent	PointerCancelEvent
onpointerdown	PointerEvent	PointerDownEvent
onpointerenter	PointerEvent	PointerEnterEvent
onpointerleave	PointerEvent	PointerLeaveEvent
onpointerlockchange	Event	PointerLockChangeEvent
onpointerlockerror	Event	PointerLockErrorEvent
onpointermove	PointerEvent	PointerMoveEvent
onpointerout	PointerEvent	PointerOutEvent
onpointerover	PointerEvent	PointerOverEvent
onpointerup	PointerEvent	PointerUpEvent
onselectionchange	Event	SelectionChangeEvent
onselectstart	Event	Unsupported
onshow	Event	Unsupported
ontouchcancel	TouchEvent	TouchCancel
ontouchend	TouchEvent	TouchEnd
ontouchmove	TouchEvent	TouchMove
ontouchstart	TouchEvent	TouchStart
ontransitioncancel	TransitionEvent	Unsupported
ontransitionend	TransitionEvent	Unsupported
ontransitionrun	TransitionEvent	Unsupported
ontransitionstart	TransitionEvent	Unsupported