sycamore_web/
elements.rs

1#![allow(non_snake_case)]
2
3use events::EventHandler;
4
5use crate::*;
6
7/// Create an HTML element with `tag`.
8// TODO: deprecate
9pub(crate) fn element(tag: &'static str) -> HtmlNode {
10    HtmlNode::create_element(tag.into())
11}
12
13/// Create a SVG element with `tag`.
14pub(crate) fn svg_element(tag: &'static str) -> HtmlNode {
15    HtmlNode::create_element_ns("http://www.w3.org/2000/svg", tag.into())
16}
17
18/// A struct representing a custom element. This can be created by calling [`custom_element`].
19pub struct CustomElement(HtmlNode);
20
21/// Create a new custom element with `tag`.
22pub fn custom_element(tag: &'static str) -> CustomElement {
23    CustomElement(element(tag))
24}
25
26impl From<CustomElement> for View {
27    fn from(el: CustomElement) -> Self {
28        View::from_node(el.0)
29    }
30}
31
32impl AsHtmlNode for CustomElement {
33    fn as_html_node(&mut self) -> &mut HtmlNode {
34        &mut self.0
35    }
36}
37
38impl GlobalProps for CustomElement {}
39impl HtmlGlobalAttributes for CustomElement {}
40
41macro_rules! impl_attribute {
42    ($(#[$attr:meta])* $v:vis $ident:ident: $ty:ty) => {
43        impl_attribute!($(#[$attr])* $v $ident (stringify!($ident)): $ty);
44    };
45    ($(#[$attr:meta])* $v:vis $ident:ident ($name:expr): $ty:ty) => {
46        $(#[$attr])*
47        $v fn $ident(mut self, value: $ty) -> Self {
48            self.set_attribute($name, value.into());
49            self
50        }
51    }
52}
53
54macro_rules! impl_attributes {
55    ($(
56        $(#[$attr:meta])*
57        $v:vis $ident:ident $(($name:literal))?: $ty:ty,
58    )*) => {
59        $(
60            impl_attribute!($(#[$attr])* $v $ident $(($name))*: $ty);
61        )*
62    };
63}
64
65macro_rules! impl_element {
66    (
67        $(#[$attr:meta])*
68        $name:ident {
69            $(
70                $(#[$prop_attr:meta])*
71                $prop:ident $(($prop_name:literal))?: $ty:ty,
72            )*
73        }
74    ) => {
75        impl_element!($(#[$attr])* $name (stringify!($name)) {
76            $(
77                $(#[$prop_attr])*
78                $prop $(($prop_name))*: $ty,
79            )*
80        });
81    };
82    (
83        $(#[$attr:meta])*
84        $name:ident ($tag:expr) {
85            $(
86                $(#[$prop_attr:meta])*
87                $prop:ident $(($prop_name:literal))?: $ty:ty,
88            )*
89        }
90    ) => {
91        paste::paste! {
92            #[doc = "The `<" $name ">` HTML element. This can be created by calling [`" $name "()`]."]
93            pub struct [<Html $name:camel>] (HtmlNode);
94
95            #[doc = "Create a `<" $name ">` element."]
96            #[doc = ""]
97            $(#[$attr])*
98            pub fn $name() -> [<Html $name:camel>] {
99                [<Html $name:camel>](element($tag))
100            }
101
102            impl From<[<Html $name:camel>]> for View {
103                fn from(el: [<Html $name:camel>]) -> Self {
104                    View::from_node(el.0)
105                }
106            }
107
108            impl AsHtmlNode for [<Html $name:camel>] {
109                fn as_html_node(&mut self) -> &mut HtmlNode {
110                    &mut self.0
111                }
112            }
113
114            impl GlobalProps for [<Html $name:camel>] {}
115            impl HtmlGlobalAttributes for [<Html $name:camel>] {}
116
117            #[doc = "Trait that provides attributes for the `<" $name ">` HTML element."]
118            pub trait [<Html $name:camel Attributes>]: SetAttribute + Sized {
119                impl_attributes! {
120                    $(
121                        $(#[$prop_attr])*
122                        $prop $(($prop_name))*: $ty,
123                    )*
124                }
125            }
126
127            impl [<Html $name:camel Attributes>] for [<Html $name:camel>] {}
128        }
129    };
130}
131
132macro_rules! impl_elements {
133    ($(
134        $(#[$attr:meta])*
135        $name:ident $(($tag:expr))? {
136            $(
137                $(#[$prop_attr:meta])*
138                $prop:ident $(($prop_name:literal))?: $ty:ty,
139            )*
140        },
141    )*) => {
142        $(
143            impl_element!($(#[$attr])* $name $(($tag))* {
144                $(
145                    $(#[$prop_attr])*
146                    $prop $(($prop_name))*: $ty,
147                )*
148            });
149        )*
150        /// Module that includes all the HTML attribute traits and is intended to be glob exported.
151        pub mod html_attributes {
152            paste::paste! {
153                pub use super::{$([<Html $name:camel Attributes>]),*};
154            }
155        }
156    };
157}
158
159macro_rules! impl_svg_element {
160    (
161        $(#[$attr:meta])*
162        $name:ident {
163            $(
164                $(#[$prop_attr:meta])*
165                $prop:ident $(($prop_name:literal))?: $ty:ty,
166            )*
167        }
168    ) => {
169        impl_svg_element!($(#[$attr])* $name (stringify!($name)) {
170            $(
171                $(#[$prop_attr])*
172                $prop $(($prop_name))*: $ty,
173            )*
174        });
175    };
176    (
177        $(#[$attr:meta])*
178        $name:ident ($tag:expr) {
179            $(
180                $(#[$prop_attr:meta])*
181                $prop:ident $(($prop_name:literal))?: $ty:ty,
182            )*
183        }
184    ) => {
185        paste::paste! {
186            #[doc = "The `<" $name ">` SVG element. This can be created by calling [`" $name "()`]."]
187            pub struct [<Svg $name:camel>] (HtmlNode);
188
189            #[doc = "Create a `<" $name ">` element."]
190            #[doc = ""]
191            $(#[$attr])*
192            pub fn $name() -> [<Svg $name:camel>] {
193                [<Svg $name:camel>](svg_element($tag))
194            }
195
196            impl From<[<Svg $name:camel>]> for View {
197                fn from(el: [<Svg $name:camel>]) -> Self {
198                    View::from_node(el.0)
199                }
200            }
201
202            impl AsHtmlNode for [<Svg $name:camel>] {
203                fn as_html_node(&mut self) -> &mut HtmlNode {
204                    &mut self.0
205                }
206            }
207
208            impl GlobalProps for [<Svg $name:camel>] {}
209            impl SvgGlobalAttributes for [<Svg $name:camel>] {}
210
211            #[doc = "Trait that provides attributes for the `<" $name ">` SVG element."]
212            pub trait [<Svg $name:camel Attributes>]: SetAttribute + Sized {
213                impl_attributes! {
214                    $(
215                        $(#[$prop_attr])*
216                        $prop $(($prop_name))*: $ty,
217                    )*
218                }
219            }
220
221            impl [<Svg $name:camel Attributes>] for [<Svg $name:camel>] {}
222        }
223    };
224}
225
226macro_rules! impl_svg_elements {
227    ($(
228        $(#[$attr:meta])*
229        $name:ident $(($tag:expr))? {
230            $(
231                $(#[$prop_attr:meta])*
232                $prop:ident $(($prop_name:literal))?: $ty:ty,
233            )*
234        },
235    )*) => {
236        $(
237            impl_svg_element!($(#[$attr])* $name $(($tag))* {
238                $(
239                    $(#[$prop_attr])*
240                    $prop $(($prop_name))*: $ty,
241                )*
242            });
243        )*
244        /// Module that includes all the Svg attribute traits and is intended to be glob exported.
245        pub mod svg_attributes {
246            paste::paste! {
247                pub use super::{$([<Svg $name:camel Attributes>]),*};
248            }
249        }
250    };
251}
252
253/// Definition of all the HTML and SVG elements.
254pub mod tags {
255    use super::*;
256
257    impl_elements! {
258        /// The `<a>` HTML element (or anchor element), with its `href` attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
259        ///
260        /// Content within each `<a>` should indicate the link's destination. If the `href` attribute is present, pressing the enter key while focused on the `<a>` element will activate it.
261        a {
262            download: impl Into<StringAttribute>,
263            href: impl Into<StringAttribute>,
264            hreflang: impl Into<StringAttribute>,
265            target: impl Into<StringAttribute>,
266            r#type("type"): impl Into<StringAttribute>,
267            ping: impl Into<StringAttribute>,
268            rel: impl Into<StringAttribute>,
269        },
270        abbr {},
271        address {},
272        area {
273            alt: impl Into<StringAttribute>,
274            coords: impl Into<StringAttribute>,
275            download: impl Into<StringAttribute>,
276            href: impl Into<StringAttribute>,
277            hreflang: impl Into<StringAttribute>,
278            media: impl Into<StringAttribute>,
279            referrerpolicy: impl Into<StringAttribute>,
280            ping: impl Into<StringAttribute>,
281            rel: impl Into<StringAttribute>,
282            shape: impl Into<StringAttribute>,
283            target: impl Into<StringAttribute>,
284            r#type("type"): impl Into<StringAttribute>,
285        },
286        article {},
287        aside {},
288        audio {
289            autoplay: impl Into<MaybeDyn<bool>>,
290            controls: impl Into<MaybeDyn<bool>>,
291            crossorigin: impl Into<StringAttribute>,
292            muted: impl Into<MaybeDyn<bool>>,
293            preload: impl Into<StringAttribute>,
294            src: impl Into<StringAttribute>,
295            r#loop("loop"): impl Into<MaybeDyn<bool>>,
296        },
297        b {},
298        base {
299            href: impl Into<StringAttribute>,
300            target: impl Into<StringAttribute>,
301        },
302        bdi {},
303        bdo {},
304        blockquote {
305            cite: impl Into<StringAttribute>,
306        },
307        body {},
308        br {},
309        /// The `<button>` HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
310        ///
311        /// By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS.
312        button {
313            autofocus: impl Into<MaybeDyn<bool>>,
314            disabled: impl Into<MaybeDyn<bool>>,
315            form: impl Into<StringAttribute>,
316            formaction: impl Into<StringAttribute>,
317            formenctype: impl Into<StringAttribute>,
318            formmethod: impl Into<StringAttribute>,
319            formnovalidate: impl Into<MaybeDyn<bool>>,
320            formtarget: impl Into<StringAttribute>,
321            name: impl Into<StringAttribute>,
322            r#type("type"): impl Into<StringAttribute>,
323            value: impl Into<StringAttribute>,
324        },
325        canvas {
326            height: impl Into<StringAttribute>, // TODO: int value
327            width: impl Into<StringAttribute>, // TODO: int value
328        },
329        caption {},
330        cite {},
331        code {
332            language: impl Into<StringAttribute>,
333        },
334        col {
335            span: impl Into<StringAttribute>, // TODO: int value
336        },
337        colgroup {
338            span: impl Into<StringAttribute>, // TODO: int value
339        },
340        data {
341            value: impl Into<StringAttribute>,
342        },
343        datalist {},
344        dd {},
345        del {
346            cite: impl Into<StringAttribute>,
347            datetime: impl Into<StringAttribute>,
348        },
349        details {
350            open: impl Into<MaybeDyn<bool>>,
351        },
352        dfn {},
353        dialog {},
354        /// The `<div>` HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
355        ///
356        /// As a "pure" container, the `<div>` element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.
357        ///
358        /// # Usage notes
359        /// The `<div>` element should be used only when no other semantic element (such as `<article>` or `<nav>`) is appropriate.
360        div {},
361        dl {},
362        dt {},
363        em {},
364        embed {
365            height: impl Into<StringAttribute>,
366            src: impl Into<StringAttribute>,
367            r#type("type"): impl Into<StringAttribute>,
368            width: impl Into<StringAttribute>, // TODO: int value
369        },
370        fieldset {},
371        figcaption {},
372        figure {},
373        footer {},
374        form {
375            acceptcharset: impl Into<StringAttribute>,
376            action: impl Into<StringAttribute>,
377            autocomplete: impl Into<StringAttribute>,
378            enctype: impl Into<StringAttribute>,
379            method: impl Into<StringAttribute>,
380            name: impl Into<StringAttribute>,
381            novalidate: impl Into<MaybeDyn<bool>>,
382            target: impl Into<StringAttribute>,
383        },
384        head {},
385        header {},
386        hgroup {},
387        h1 {},
388        h2 {},
389        h3 {},
390        h4 {},
391        h5 {},
392        h6 {},
393        hr {},
394        html {},
395        i {},
396        iframe {
397            allow: impl Into<StringAttribute>,
398            allowfullscreen: impl Into<MaybeDyn<bool>>,
399            allowpaymentrequest: impl Into<MaybeDyn<bool>>,
400            height: impl Into<StringAttribute>,
401            loading: impl Into<StringAttribute>,
402            name: impl Into<StringAttribute>,
403            referrerpolicy: impl Into<StringAttribute>,
404            sandbox: impl Into<MaybeDyn<bool>>,
405            src: impl Into<StringAttribute>,
406            srcdoc: impl Into<StringAttribute>,
407            width: impl Into<StringAttribute>,
408        },
409        img {
410            alt: impl Into<StringAttribute>,
411            crossorigin: impl Into<StringAttribute>,
412            decoding: impl Into<StringAttribute>,
413            height: impl Into<StringAttribute>,
414            ismap: impl Into<MaybeDyn<bool>>,
415            loading: impl Into<StringAttribute>,
416            referrerpolicy: impl Into<StringAttribute>,
417            sizes: impl Into<StringAttribute>,
418            src: impl Into<StringAttribute>,
419            srcset: impl Into<StringAttribute>,
420            usemap: impl Into<StringAttribute>,
421            width: impl Into<StringAttribute>,
422        },
423        /// The `<input>` HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The `<input>` element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
424        input {
425            accept: impl Into<StringAttribute>,
426            alt: impl Into<StringAttribute>,
427            autocomplete: impl Into<StringAttribute>,
428            autofocus: impl Into<MaybeDyn<bool>>,
429            capture: impl Into<StringAttribute>,
430            checked: impl Into<MaybeDyn<bool>>,
431            directory: impl Into<StringAttribute>,
432            disabled: impl Into<MaybeDyn<bool>>,
433            form: impl Into<StringAttribute>,
434            formaction: impl Into<StringAttribute>,
435            formenctype: impl Into<StringAttribute>,
436            formmethod: impl Into<StringAttribute>,
437            formnovalidate: impl Into<MaybeDyn<bool>>,
438            formtarget: impl Into<StringAttribute>,
439            height: impl Into<StringAttribute>, // TODO: int value
440            initial_checked: impl Into<MaybeDyn<bool>>,
441            initial_value: impl Into<StringAttribute>,
442            list: impl Into<StringAttribute>,
443            max: impl Into<StringAttribute>,
444            maxlength: impl Into<StringAttribute>, // TODO: int value
445            min: impl Into<StringAttribute>,
446            minlength: impl Into<StringAttribute>, // TODO: int value
447            multiple: impl Into<MaybeDyn<bool>>,
448            name: impl Into<StringAttribute>,
449            pattern: impl Into<StringAttribute>,
450            placeholder: impl Into<StringAttribute>,
451            readonly: impl Into<MaybeDyn<bool>>,
452            required: impl Into<MaybeDyn<bool>>,
453            size: impl Into<StringAttribute>, // TODO: int value
454            spellcheck: impl Into<MaybeDyn<bool>>,
455            src: impl Into<StringAttribute>,
456            step: impl Into<StringAttribute>,
457            tabindex: impl Into<StringAttribute>, // TODO: int value
458            r#type("type"): impl Into<StringAttribute>,
459            value: impl Into<StringAttribute>,
460            width: impl Into<StringAttribute>, // TODO: int value
461        },
462        ins {
463            cite: impl Into<StringAttribute>,
464            datetime: impl Into<StringAttribute>,
465        },
466        kbd {},
467        keygen {},
468        /// The `<label>` HTML element represents a caption for an item in a user interface.
469        ///
470        /// Associating a `<label>` with an `<input>` element offers some major advantages:
471        /// * The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
472        /// * When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.
473        ///
474        /// To associate the `<label>` with an `<input>` element, you need to give the `<input>` an `id` attribute. The `<label>` then needs a for attribute whose value is the same as the input's `id`.
475        ///
476        /// Alternatively, you can nest the `<input>` directly inside the `<label>`, in which case the `for` and `id` attributes are not needed because the association is implicit:
477        ///
478        /// ```html
479        /// <label>Do you like peas?
480        ///   <input type="checkbox" name="peas">
481        /// </label>
482        /// ```
483        /// The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:
484        ///
485        /// ```html
486        /// <label for="username">Enter your username:</label>
487        /// <input id="username">
488        /// <label for="username">Forgot your username?</label>
489        /// ```
490        /// Elements that can be associated with a `<label>` element include `<button>`, `<input>` (except for `type="hidden"`), `<meter>`, `<output>`, `<progress>`, `<select>` and `<textarea>`.
491        label {
492            form: impl Into<StringAttribute>,
493            r#for("for"): impl Into<StringAttribute>,
494        },
495        legend {},
496        /// The `<li>` HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (`<ol>`), an unordered list (`<ul>`), or a menu (`<menu>`). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
497        li {
498            value: impl Into<StringAttribute>, // TODO: int value
499        },
500        link {
501            r#as("as"): impl Into<StringAttribute>,
502            crossorigin: impl Into<StringAttribute>,
503            href: impl Into<StringAttribute>,
504            hreflang: impl Into<StringAttribute>,
505            media: impl Into<StringAttribute>,
506            rel: impl Into<StringAttribute>,
507            sizes: impl Into<StringAttribute>,
508            title: impl Into<StringAttribute>,
509            r#type("type"): impl Into<StringAttribute>,
510            integrity: impl Into<StringAttribute>,
511        },
512        main {},
513        map {
514            name: impl Into<StringAttribute>,
515        },
516        mark {},
517        menu {},
518        menuitem {},
519        meta {
520            charset: impl Into<StringAttribute>,
521            content: impl Into<StringAttribute>,
522            http_equiv("http-equiv"): impl Into<StringAttribute>,
523            name: impl Into<StringAttribute>,
524        },
525        meter {
526            value: impl Into<StringAttribute>, // TODO: int value
527            min: impl Into<StringAttribute>, // TODO: int value
528            max: impl Into<StringAttribute>, // TODO: int value
529            low: impl Into<StringAttribute>, // TODO: int value
530            high: impl Into<StringAttribute>, // TODO: int value
531            optimum: impl Into<StringAttribute>, // TODO: int value
532            form: impl Into<StringAttribute>,
533        },
534        nav {},
535        noscript {},
536        object {
537            data: impl Into<StringAttribute>,
538            form: impl Into<StringAttribute>,
539            height: impl Into<StringAttribute>, // TODO: int value
540            name: impl Into<StringAttribute>,
541            r#type("type"): impl Into<StringAttribute>,
542            typemustmatch: impl Into<MaybeDyn<bool>>,
543            usemap: impl Into<StringAttribute>,
544            width: impl Into<StringAttribute>,
545        },
546        /// The `<ol>` HTML element represents an ordered list of items — typically rendered as a numbered list.
547        ol {
548            reversed: impl Into<MaybeDyn<bool>>,
549            start: impl Into<StringAttribute>, // TODO: int value
550            r#type("type"): impl Into<StringAttribute>,
551        },
552        optgroup {
553            disabled: impl Into<MaybeDyn<bool>>,
554            label: impl Into<StringAttribute>,
555        },
556        option {
557            disabled: impl Into<MaybeDyn<bool>>,
558            initial_selected: impl Into<MaybeDyn<bool>>,
559            label: impl Into<StringAttribute>,
560            selected: impl Into<MaybeDyn<bool>>,
561            value: impl Into<StringAttribute>,
562        },
563        output {
564            r#for("for"): impl Into<StringAttribute>,
565            form: impl Into<StringAttribute>,
566            name: impl Into<StringAttribute>,
567        },
568        /// The `<p>` HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
569        ///
570        /// Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing `</p>` tag.
571        p {},
572        param {
573            name: impl Into<StringAttribute>,
574            value: impl Into<StringAttribute>,
575        },
576        picture {},
577        pre {},
578        progress {
579            value: impl Into<StringAttribute>, // TODO: f64 value
580            max: impl Into<StringAttribute>, // TODO: f64 value
581        },
582        q {
583            cite: impl Into<StringAttribute>,
584        },
585        rp {},
586        rt {},
587        ruby {},
588        s {},
589        samp {},
590        script {
591            r#async: impl Into<MaybeDyn<bool>>,
592            crossorigin: impl Into<StringAttribute>,
593            defer: impl Into<MaybeDyn<bool>>,
594            integrity: impl Into<StringAttribute>,
595            nomodule: impl Into<MaybeDyn<bool>>,
596            nonce: impl Into<StringAttribute>,
597            src: impl Into<StringAttribute>,
598            script: impl Into<StringAttribute>,
599            text: impl Into<StringAttribute>,
600            r#type("type"): impl Into<StringAttribute>,
601        },
602        section {},
603        select {
604            autocomplete: impl Into<StringAttribute>,
605            autofocus: impl Into<MaybeDyn<bool>>,
606            disabled: impl Into<MaybeDyn<bool>>,
607            form: impl Into<StringAttribute>,
608            multiple: impl Into<MaybeDyn<bool>>,
609            name: impl Into<StringAttribute>,
610            required: impl Into<MaybeDyn<bool>>,
611            size: impl Into<StringAttribute>, // TODO: int value
612            value: impl Into<StringAttribute>,
613        },
614        small {},
615        source {
616            src: impl Into<StringAttribute>,
617            r#type("type"): impl Into<StringAttribute>,
618        },
619        /// The `<span>` HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. `<span>` is very much like a `<div>` element, but `<div>` is a block-level element whereas a `<span>` is an inline element.
620        span {},
621        strong {},
622        style {
623            media: impl Into<StringAttribute>,
624            nonce: impl Into<StringAttribute>,
625            title: impl Into<StringAttribute>,
626            r#type("type"): impl Into<StringAttribute>,
627        },
628        sub {},
629        summary {},
630        sup {},
631        table {},
632        tbody {},
633        td {
634            colspan: impl Into<StringAttribute>, // TODO: int value
635            headers: impl Into<StringAttribute>,
636            rowspan: impl Into<StringAttribute>, // TODO: int value
637        },
638        template {},
639        textarea {
640            autocomplete: impl Into<StringAttribute>,
641            autofocus: impl Into<MaybeDyn<bool>>,
642            cols: impl Into<StringAttribute>, // TODO: int value
643            disabled: impl Into<MaybeDyn<bool>>,
644            form: impl Into<StringAttribute>,
645            initial_value: impl Into<StringAttribute>,
646            maxlength: impl Into<StringAttribute>, // TODO: int value
647            minlength: impl Into<StringAttribute>, // TODO: int value
648            name: impl Into<StringAttribute>,
649            placeholder: impl Into<StringAttribute>,
650            readonly: impl Into<MaybeDyn<bool>>,
651            required: impl Into<MaybeDyn<bool>>,
652            rows: impl Into<StringAttribute>, // TODO: int value
653            spellcheck: impl Into<MaybeDyn<bool>>,
654            r#type("type"): impl Into<StringAttribute>,
655            value: impl Into<StringAttribute>,
656            wrap: impl Into<StringAttribute>,
657        },
658        tfoot {},
659        th {
660            abbr: impl Into<StringAttribute>,
661            colspan: impl Into<StringAttribute>, // TODO: int value
662            headers: impl Into<StringAttribute>,
663            rowspan: impl Into<StringAttribute>, // TODO: int value
664            scope: impl Into<StringAttribute>,
665        },
666        thead {},
667        time {
668            datetime: impl Into<StringAttribute>,
669        },
670        title {},
671        tr {},
672        track {
673            default: impl Into<MaybeDyn<bool>>,
674            kind: impl Into<StringAttribute>,
675            label: impl Into<StringAttribute>,
676            src: impl Into<StringAttribute>,
677            srclang: impl Into<StringAttribute>,
678        },
679        u {},
680        /// The `<ul>` HTML element represents an unordered list of items, typically rendered as a bulleted list.
681        ul {},
682        var {},
683        video {
684            autoplay: impl Into<MaybeDyn<bool>>,
685            controls: impl Into<MaybeDyn<bool>>,
686            crossorigin: impl Into<StringAttribute>,
687            height: impl Into<StringAttribute>, // TODO: int value
688            r#loop("loop"): impl Into<MaybeDyn<bool>>,
689            muted: impl Into<MaybeDyn<bool>>,
690            playsinline: impl Into<MaybeDyn<bool>>,
691            poster: impl Into<StringAttribute>,
692            preload: impl Into<StringAttribute>,
693            src: impl Into<StringAttribute>,
694            width: impl Into<StringAttribute>, // TODO: int value
695        },
696        wbr {},
697    }
698
699    impl_svg_elements! {
700        svg {
701            xmlns: impl Into<StringAttribute>,
702        },
703        svg_a("a") {},
704        animate {},
705        animateMotion {},
706        animateTransform {},
707        circle {},
708        clipPath {},
709        defs {},
710        desc {},
711        discard {},
712        ellipse {},
713        feBlend {},
714        feColorMatrix {},
715        feComponentTransfer {},
716        feComposite {},
717        feConvolveMatrix {},
718        feDiffuseLighting {},
719        feDisplacementMap {},
720        feDistantLight {},
721        feDropShadow {},
722        feFlood {},
723        feFuncA {},
724        feFuncB {},
725        feFuncG {},
726        feFuncR {},
727        feGaussianBlur {},
728        feImage {},
729        feMerge {},
730        feMergeNode {},
731        feMorphology {},
732        feOffset {},
733        fePointLight {},
734        feSpecularLighting {},
735        feSpotLight {},
736        feTile {},
737        feTurbulence {},
738        filter {},
739        foreignObject {},
740        g {},
741        hatch {},
742        hatchpath {},
743        image {},
744        line {},
745        linearGradient {},
746        marker {},
747        mask {},
748        metadata {},
749        mpath {},
750        path {},
751        pattern {},
752        polygon {},
753        polyline {},
754        radialGradient {},
755        rect {},
756        svg_script("script") {},
757        set {},
758        stop {},
759        svg_style("style") {},
760        switch {},
761        symbol {},
762        text {},
763        textPath {},
764        svg_title("title") {},
765        tspan {},
766        r#use("use") {},
767        view {},
768    }
769}
770
771/// A trait that is implemented for all elements and which provides all the global HTML attributes.
772///
773/// Reference: <https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes>
774pub trait HtmlGlobalAttributes: SetAttribute + Sized {
775    impl_attributes! {
776        /// Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.
777        accesskey: impl Into<StringAttribute>,
778        /// Controls whether inputted text is automatically capitalized and, if so, in what manner.
779        autocapitalize: impl Into<StringAttribute>,
780        /// Indicates that an element is to be focused on page load, or as soon as the `<dialog>` it is part of is displayed. This attribute is a boolean, initially false.
781        autofocus: impl Into<MaybeDyn<bool>>,
782        /// The class global attribute is a space-separated list of the case-sensitive classes of the element.
783        /// Classes allow CSS and JavaScript to select and access specific elements via the class selectors.
784        class: impl Into<StringAttribute>,
785        /// An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:
786        /// * `true` or the empty string, which indicates that the element must be editable;
787        /// * `false`, which indicates that the element must not be editable.
788        contenteditable: impl Into<StringAttribute>,
789        /// An enumerated attribute indicating the directionality of the element's text. It can have the following values:
790        /// * `ltr`, which means left to right and is to be used for languages that are written from the left to the right (like English);
791        /// * `rtl`, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
792        /// * `auto`, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element.
793        dir: impl Into<StringAttribute>,
794        /// An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values:
795        /// * `true`, which indicates that the element may be dragged
796        /// * `false`, which indicates that the element may not be dragged.
797        draggable: impl Into<StringAttribute>,
798        /// Hints what action label (or icon) to present for the enter key on virtual keyboards.
799        enterkeyhint: impl Into<StringAttribute>,
800        /// Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
801        exportparts: impl Into<StringAttribute>,
802        /// An enumerated attribute indicating that the element is not yet, or is no longer, _relevant_. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
803        hidden: impl Into<MaybeDyn<bool>>,
804        /// The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
805        id: impl Into<StringAttribute>,
806        /// A boolean value that makes the browser disregard user input events for the element. Useful when click events are present.
807        inert: impl Into<MaybeDyn<bool>>,
808        /// Provides a hint to browsers about the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on `<input>` elements, but is usable on any element while in contenteditable mode.
809        inputmode: impl Into<StringAttribute>,
810        /// The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element.
811        ///
812        /// This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.
813        is: impl Into<StringAttribute>,
814        /// The unique, global identifier of an item.
815        itemid: impl Into<StringAttribute>,
816        /// Used to add properties to an item. Every HTML element may have an `itemprop` attribute specified, where an `itemprop` consists of a name and value pair.
817        itemprop: impl Into<StringAttribute>,
818        /// Properties that are not descendants of an element with the `itemscope` attribute can be associated with the item using an `itemref`. It provides a list of element ids (not `itemid`s) with additional properties elsewhere in the document.
819        itemref: impl Into<StringAttribute>,
820        /// `itemscope` (usually) works along with `itemtype` to specify that the HTML contained in a block is about a particular item. `itemscope` creates the Item and defines the scope of the `itemtype` associated with it. `itemtype` is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.
821        itemscope: impl Into<MaybeDyn<bool>>,
822        /// Specifies the URL of the vocabulary that will be used to define `itemprops` (item properties) in the data structure. `itemscope` is used to set the scope of where in the data structure the vocabulary set by `itemtype` will be active.
823        itemtype: impl Into<StringAttribute>,
824        /// Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one "language tag" (made of hyphen-separated "language subtags") in the format defined in [RFC 5646: Tags for Identifying Languages (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). `xml:lang` has priority over it.
825        lang: impl Into<StringAttribute>,
826        /// A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed.
827        nonce: impl Into<StringAttribute>,
828        /// A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the `::part` pseudo-element.
829        part: impl Into<StringAttribute>,
830        /// Used to designate an element as a popover element (see Popover API). Popover elements are hidden via `display: none` until opened via an invoking/control element (i.e. a `<button>` or `<input type="button">` with a popovertarget attribute) or a `HTMLElement.showPopover()` call.
831        popover: impl Into<StringAttribute>,
832        /// Roles define the semantic meaning of content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object. `roles` are added to HTML elements using `role="role_type"`, where `role_type` is the name of a role in the ARIA specification.
833        role: impl Into<StringAttribute>,
834        /// The slot global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the `<slot>` element whose name attribute's value matches that slot attribute's value.
835        slot: impl Into<StringAttribute>,
836        /// An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
837        /// * empty string or `true`, which indicates that the element should be, if possible, checked for spelling errors;
838        /// * `false`, which indicates that the element should not be checked for spelling errors.
839        spellcheck: impl Into<StringAttribute>,
840        /// Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the `<style>` element have mainly the purpose of allowing for quick styling, for example for testing purposes.
841        style: impl Into<StringAttribute>,
842        /// An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:
843        /// * a _negative value_ means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
844        /// * `0` means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
845        /// * a _positive value_ means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex. If several elements share the same tabindex, their relative order follows their relative positions in the document.
846        tabindex: impl Into<StringAttribute>,
847        /// Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
848        title: impl Into<StringAttribute>,
849        /// An enumerated attribute that is used to specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:
850        /// * empty string or `yes`, which indicates that the element will be translated.
851        /// * `no`, which indicates that the element will not be translated.
852        translate: impl Into<StringAttribute>,
853        /// An enumerated attribute used to control the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available for elements that its content is editable (for example, it is an `<input>` or `<textarea>` element, or an element with the `contenteditable` attribute set).
854        /// `auto` or an _empty string_, which automatically shows the virtual keyboard when the element is focused or tapped.
855        /// `manual`, which decouples focus and tap on the element from the virtual keyboard's state.
856        virtualkeyboardpolicy: impl Into<StringAttribute>,
857    }
858}
859
860/// A trait that is implemented for all SVG elements and which provides all the global SVG
861/// attributes.
862///
863/// Reference: <https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute>
864pub trait SvgGlobalAttributes: SetAttribute + Sized {
865    impl_attributes! {
866        accentHeight("accent-height"): impl Into<StringAttribute>,
867        accumulate: impl Into<StringAttribute>,
868        additive: impl Into<StringAttribute>,
869        alignmentBaseline("alignment-baseline"): impl Into<StringAttribute>,
870        alphabetic: impl Into<StringAttribute>,
871        amplitude: impl Into<StringAttribute>,
872        arabicForm("arabic-form"): impl Into<StringAttribute>,
873        ascent: impl Into<StringAttribute>,
874        attributeName("attributeName"): impl Into<StringAttribute>,
875        attributeType("attributeType"): impl Into<StringAttribute>,
876        azimuth: impl Into<StringAttribute>,
877        baseFrequency("baseFrequency"): impl Into<StringAttribute>,
878        baselineShift("baseline-shift"): impl Into<StringAttribute>,
879        baseProfile("baseProfile"): impl Into<StringAttribute>,
880        bbox: impl Into<StringAttribute>,
881        begin: impl Into<StringAttribute>,
882        bias: impl Into<StringAttribute>,
883        by: impl Into<StringAttribute>,
884        calcMode("calcMode"): impl Into<StringAttribute>,
885        capHeight("cap-height"): impl Into<StringAttribute>,
886        class: impl Into<StringAttribute>,
887        clipPathUnits("clipPathUnits"): impl Into<StringAttribute>,
888        clipPath("clip-path"): impl Into<StringAttribute>,
889        clipRule("clip-rule"): impl Into<StringAttribute>,
890        color: impl Into<StringAttribute>,
891        colorInterpolation("color-interpolation"): impl Into<StringAttribute>,
892        colorInterpolationFilters("color-interpolation-filters"): impl Into<StringAttribute>,
893        colorProfile("color-profile"): impl Into<StringAttribute>,
894        colorRendering("color-rendering"): impl Into<StringAttribute>,
895        crossorigin: impl Into<StringAttribute>,
896        cursor: impl Into<StringAttribute>,
897        cx: impl Into<StringAttribute>,
898        cy: impl Into<StringAttribute>,
899        d: impl Into<StringAttribute>,
900        decelerate: impl Into<StringAttribute>,
901        descent: impl Into<StringAttribute>,
902        diffuseConstant("diffuseConstant"): impl Into<StringAttribute>,
903        direction: impl Into<StringAttribute>,
904        display: impl Into<StringAttribute>,
905        divisor: impl Into<StringAttribute>,
906        dominantBaseline("dominant-baseline"): impl Into<StringAttribute>,
907        dur: impl Into<StringAttribute>,
908        dx: impl Into<StringAttribute>,
909        dy: impl Into<StringAttribute>,
910        edgeMode("edgeMode"): impl Into<StringAttribute>,
911        elevation: impl Into<StringAttribute>,
912        enableBackground("enable-background"): impl Into<StringAttribute>,
913        end: impl Into<StringAttribute>,
914        exponent: impl Into<StringAttribute>,
915        fill: impl Into<StringAttribute>,
916        fillOpacity("fill-opacity"): impl Into<StringAttribute>,
917        fillRule("fill-rule"): impl Into<StringAttribute>,
918        filter: impl Into<StringAttribute>,
919        filterUnits("filterUnits"): impl Into<StringAttribute>,
920        floodColor("flood-color"): impl Into<StringAttribute>,
921        floodOpacity("flood-opacity"): impl Into<StringAttribute>,
922        fontFamily("font-family"): impl Into<StringAttribute>,
923        fontSize("font-size"): impl Into<StringAttribute>,
924        fontSizeAdjust("font-size-adjust"): impl Into<StringAttribute>,
925        fontStretch("font-stretch"): impl Into<StringAttribute>,
926        fontStyle("font-style"): impl Into<StringAttribute>,
927        fontVariant("font-variant"): impl Into<StringAttribute>,
928        fontWeight("font-weight"): impl Into<StringAttribute>,
929        format: impl Into<StringAttribute>,
930        from: impl Into<StringAttribute>,
931        fr: impl Into<StringAttribute>,
932        fx: impl Into<StringAttribute>,
933        fy: impl Into<StringAttribute>,
934        g1: impl Into<StringAttribute>,
935        g2: impl Into<StringAttribute>,
936        glyphName("glyph-name"): impl Into<StringAttribute>,
937        glyphOrientationHorizontal("glyph-orientation-horizontal"): impl Into<StringAttribute>,
938        glyphOrientationVertical("glyph-orientation-vertical"): impl Into<StringAttribute>,
939        glyphRef: impl Into<StringAttribute>,
940        gradientTransform("gradientTransform"): impl Into<StringAttribute>,
941        gradientUnits("gradientUnits"): impl Into<StringAttribute>,
942        hanging: impl Into<StringAttribute>,
943        height: impl Into<StringAttribute>,
944        href: impl Into<StringAttribute>,
945        hreflang: impl Into<StringAttribute>,
946        horizAdvX("horiz-adv-x"): impl Into<StringAttribute>,
947        horizOriginX("horiz-origin-x"): impl Into<StringAttribute>,
948        id: impl Into<StringAttribute>,
949        ideographic: impl Into<StringAttribute>,
950        imageRendering("image-rendering"): impl Into<StringAttribute>,
951        in_: impl Into<StringAttribute>,
952        in2: impl Into<StringAttribute>,
953        intercept: impl Into<StringAttribute>,
954        k: impl Into<StringAttribute>,
955        k1: impl Into<StringAttribute>,
956        k2: impl Into<StringAttribute>,
957        k3: impl Into<StringAttribute>,
958        k4: impl Into<StringAttribute>,
959        kernelMatrix("kernelMatrix"): impl Into<StringAttribute>,
960        kernelUnitLength("kernelUnitLength"): impl Into<StringAttribute>,
961        kerning: impl Into<StringAttribute>,
962        keyPoints("keyPoints"): impl Into<StringAttribute>,
963        keySplines("keySplines"): impl Into<StringAttribute>,
964        keyTimes("keyTimes"): impl Into<StringAttribute>,
965        lang: impl Into<StringAttribute>,
966        lengthAdjust("lengthAdjust"): impl Into<StringAttribute>,
967        letterSpacing("letter-spacing"): impl Into<StringAttribute>,
968        lightingColor("lighting-color"): impl Into<StringAttribute>,
969        limitingConeAngle("limitingConeAngle"): impl Into<StringAttribute>,
970        local: impl Into<StringAttribute>,
971        markerEnd("marker-end"): impl Into<StringAttribute>,
972        markerMid("marker-mid"): impl Into<StringAttribute>,
973        markerStart("marker-start"): impl Into<StringAttribute>,
974        markerHeight("markerHeight"): impl Into<StringAttribute>,
975        markerUnits("markerUnits"): impl Into<StringAttribute>,
976        markerWidth("markerWidth"): impl Into<StringAttribute>,
977        mask: impl Into<StringAttribute>,
978        maskContentUnits("maskContentUnits"): impl Into<StringAttribute>,
979        maskUnits("maskUnits"): impl Into<StringAttribute>,
980        mathematical: impl Into<StringAttribute>,
981        max: impl Into<StringAttribute>,
982        media: impl Into<StringAttribute>,
983        method: impl Into<StringAttribute>,
984        min: impl Into<StringAttribute>,
985        mode: impl Into<StringAttribute>,
986        name: impl Into<StringAttribute>,
987        numOctaves("numOctaves"): impl Into<StringAttribute>,
988        offset: impl Into<StringAttribute>,
989        opacity: impl Into<StringAttribute>,
990        operator: impl Into<StringAttribute>,
991        order: impl Into<StringAttribute>,
992        orient: impl Into<StringAttribute>,
993        orientation: impl Into<StringAttribute>,
994        origin: impl Into<StringAttribute>,
995        overflow: impl Into<StringAttribute>,
996        overlinePosition("overline-position"): impl Into<StringAttribute>,
997        overlineThickness("overline-thickness"): impl Into<StringAttribute>,
998        panose1("panose-1"): impl Into<StringAttribute>,
999        paintOrder("paint-order"): impl Into<StringAttribute>,
1000        path: impl Into<StringAttribute>,
1001        pathLength("pathLength"): impl Into<StringAttribute>,
1002        patternContentUnits("patternContentUnits"): impl Into<StringAttribute>,
1003        patternTransform("patternTransform"): impl Into<StringAttribute>,
1004        patternUnits("patternUnits"): impl Into<StringAttribute>,
1005        ping: impl Into<StringAttribute>,
1006        pointerEvents("pointer-events"): impl Into<StringAttribute>,
1007        points: impl Into<StringAttribute>,
1008        pointsAtX("pointsAtX"): impl Into<StringAttribute>,
1009        pointsAtY("pointsAtY"): impl Into<StringAttribute>,
1010        pointsAtZ("pointsAtZ"): impl Into<StringAttribute>,
1011        preserveAlpha("preserveAlpha"): impl Into<StringAttribute>,
1012        preserveAspectRatio("preserveAspectRatio"): impl Into<StringAttribute>,
1013        primitiveUnits("primitiveUnits"): impl Into<StringAttribute>,
1014        r: impl Into<StringAttribute>,
1015        radius: impl Into<StringAttribute>,
1016        referrerPolicy("referrerPolicy"): impl Into<StringAttribute>,
1017        refX("refX"): impl Into<StringAttribute>,
1018        refY("refY"): impl Into<StringAttribute>,
1019        rel: impl Into<StringAttribute>,
1020        renderingIntent("rendering-intent"): impl Into<StringAttribute>,
1021        repeatCount("repeatCount"): impl Into<StringAttribute>,
1022        repeatDur("repeatDur"): impl Into<StringAttribute>,
1023        requiredExtensions("requiredExtensions"): impl Into<StringAttribute>,
1024        requiredFeatures("requiredFeatures"): impl Into<StringAttribute>,
1025        restart: impl Into<StringAttribute>,
1026        result: impl Into<StringAttribute>,
1027        rotate: impl Into<StringAttribute>,
1028        rx: impl Into<StringAttribute>,
1029        ry: impl Into<StringAttribute>,
1030        scale: impl Into<StringAttribute>,
1031        seed: impl Into<StringAttribute>,
1032        shapeRendering("shape-rendering"): impl Into<StringAttribute>,
1033        slope: impl Into<StringAttribute>,
1034        spacing: impl Into<StringAttribute>,
1035        specularConstant("specularConstant"): impl Into<StringAttribute>,
1036        specularExponent("specularExponent"): impl Into<StringAttribute>,
1037        speed: impl Into<StringAttribute>,
1038        spreadMethod("spreadMethod"): impl Into<StringAttribute>,
1039        startOffset("startOffset"): impl Into<StringAttribute>,
1040        stdDeviation("stdDeviation"): impl Into<StringAttribute>,
1041        stemh: impl Into<StringAttribute>,
1042        stemv: impl Into<StringAttribute>,
1043        stitchTiles("stitchTiles"): impl Into<StringAttribute>,
1044        stopColor("stop-color"): impl Into<StringAttribute>,
1045        stopOpacity("stop-opacity"): impl Into<StringAttribute>,
1046        strikethroughPosition("strikethrough-position"): impl Into<StringAttribute>,
1047        strikethroughThickness("strikethrough-thickness"): impl Into<StringAttribute>,
1048        string: impl Into<StringAttribute>,
1049        stroke: impl Into<StringAttribute>,
1050        strokeDasharray("stroke-dasharray"): impl Into<StringAttribute>,
1051        strokeDashoffset("stroke-dashoffset"): impl Into<StringAttribute>,
1052        strokeLinecap("stroke-linecap"): impl Into<StringAttribute>,
1053        strokeLinejoin("stroke-linejoin"): impl Into<StringAttribute>,
1054        strokeMiterlimit("stroke-miterlimit"): impl Into<StringAttribute>,
1055        strokeOpacity("stroke-opacity"): impl Into<StringAttribute>,
1056        strokeWidth("stroke-width"): impl Into<StringAttribute>,
1057        style: impl Into<StringAttribute>,
1058        surfaceScale("surfaceScale"): impl Into<StringAttribute>,
1059        systemLanguage("systemLanguage"): impl Into<StringAttribute>,
1060        tabindex: impl Into<StringAttribute>,
1061        tableValues("tableValues"): impl Into<StringAttribute>,
1062        target: impl Into<StringAttribute>,
1063        targetX("targetX"): impl Into<StringAttribute>,
1064        targetY("targetY"): impl Into<StringAttribute>,
1065        textAnchor("text-anchor"): impl Into<StringAttribute>,
1066        textDecoration("text-decoration"): impl Into<StringAttribute>,
1067        textRendering("text-rendering"): impl Into<StringAttribute>,
1068        textLength("textLength"): impl Into<StringAttribute>,
1069        to: impl Into<StringAttribute>,
1070        transform: impl Into<StringAttribute>,
1071        transformOrigin("transform-origin"): impl Into<StringAttribute>,
1072        type_: impl Into<StringAttribute>,
1073        u1: impl Into<StringAttribute>,
1074        u2: impl Into<StringAttribute>,
1075        underlinePosition("underline-position"): impl Into<StringAttribute>,
1076        underlineThickness("underline-thickness"): impl Into<StringAttribute>,
1077        unicode: impl Into<StringAttribute>,
1078        unicodeBidi("unicode-bidi"): impl Into<StringAttribute>,
1079        unicodeRange("unicode-range"): impl Into<StringAttribute>,
1080        unitsPerEm("units-per-em"): impl Into<StringAttribute>,
1081        vAlphabetic("v-alphabetic"): impl Into<StringAttribute>,
1082        vHanging("v-hanging"): impl Into<StringAttribute>,
1083        vIdeographic("v-ideographic"): impl Into<StringAttribute>,
1084        vMathematical("v-mathematical"): impl Into<StringAttribute>,
1085        values: impl Into<StringAttribute>,
1086        vectorEffect("vector-effect"): impl Into<StringAttribute>,
1087        version: impl Into<StringAttribute>,
1088        vertAdvY("vert-adv-y"): impl Into<StringAttribute>,
1089        vertOriginX("vert-origin-x"): impl Into<StringAttribute>,
1090        vertOriginY("vert-origin-y"): impl Into<StringAttribute>,
1091        viewBox: impl Into<StringAttribute>,
1092        visibility: impl Into<StringAttribute>,
1093        width: impl Into<StringAttribute>,
1094        widths: impl Into<StringAttribute>,
1095        wordSpacing("word-spacing"): impl Into<StringAttribute>,
1096        writingMode("writing-mode"): impl Into<StringAttribute>,
1097        x: impl Into<StringAttribute>,
1098        xHeight("x-height"): impl Into<StringAttribute>,
1099        x1: impl Into<StringAttribute>,
1100        x2: impl Into<StringAttribute>,
1101        xChannelSelector("xChannelSelector"): impl Into<StringAttribute>,
1102        xmlBase("xml:base"): impl Into<StringAttribute>,
1103        xmlLang("xml:lang"): impl Into<StringAttribute>,
1104        xmlSpace("xml:space"): impl Into<StringAttribute>,
1105        y: impl Into<StringAttribute>,
1106        y1: impl Into<StringAttribute>,
1107        y2: impl Into<StringAttribute>,
1108        yChannelSelector("yChannelSelector"): impl Into<StringAttribute>,
1109        zoomAndPan("zoomAndPan"): impl Into<StringAttribute>,
1110    }
1111}
1112
1113/// Attributes that are available on all elements.
1114pub trait GlobalAttributes: SetAttribute + Sized {
1115    /// Set attribute `name` with `value`.
1116    fn attr(mut self, name: &'static str, value: impl Into<StringAttribute>) -> Self {
1117        self.set_attribute(name, value.into());
1118        self
1119    }
1120
1121    /// Set attribute `name` with `value`.
1122    fn bool_attr(mut self, name: &'static str, value: impl Into<MaybeDyn<bool>>) -> Self {
1123        self.set_attribute(name, value.into());
1124        self
1125    }
1126
1127    /// Set JS property `name` with `value`.
1128    fn prop(mut self, name: &'static str, value: impl Into<MaybeDyn<JsValue>>) -> Self {
1129        self.set_attribute(name, value.into());
1130        self
1131    }
1132
1133    /// Set an event handler with `name`.
1134    fn on<E: events::EventDescriptor, R>(
1135        mut self,
1136        _: E,
1137        mut handler: impl EventHandler<E, R>,
1138    ) -> Self {
1139        let scope = use_current_scope(); // Run handler inside the current scope.
1140        let handler = move |ev: web_sys::Event| scope.run_in(|| handler.call(ev.unchecked_into()));
1141        self.set_event_handler(E::NAME, handler);
1142        self
1143    }
1144
1145    /// Set a two way binding with `name`.
1146    fn bind<E: bind::BindDescriptor>(mut self, _: E, signal: Signal<E::ValueTy>) -> Self {
1147        let scope = use_current_scope(); // Run handler inside the current scope.
1148        let handler = move |ev: web_sys::Event| {
1149            scope.run_in(|| {
1150                let value =
1151                    js_sys::Reflect::get(&ev.current_target().unwrap(), &E::TARGET_PROPERTY.into())
1152                        .unwrap();
1153                signal.set(E::CONVERT_FROM_JS(&value).expect("failed to convert value from js"));
1154            })
1155        };
1156        self.set_event_handler(<E::Event as events::EventDescriptor>::NAME, handler);
1157
1158        self.prop(E::TARGET_PROPERTY, move || signal.get_clone().into())
1159    }
1160}
1161
1162impl<T: GlobalProps> GlobalAttributes for T {}
1163
1164/// Props that are available on all elements.
1165pub trait GlobalProps: GlobalAttributes + AsHtmlNode + Sized {
1166    /// Set the inner html of an element.
1167    fn dangerously_set_inner_html(mut self, inner_html: impl Into<Cow<'static, str>>) -> Self {
1168        self.as_html_node().set_inner_html(inner_html.into());
1169        self
1170    }
1171
1172    /// Set the children of an element.
1173    fn children(mut self, children: impl Into<View>) -> Self {
1174        self.as_html_node().append_view(children.into());
1175        self
1176    }
1177
1178    /// Set a [`NodeRef`] on this element.
1179    fn r#ref(mut self, noderef: NodeRef) -> Self {
1180        if is_not_ssr!() {
1181            noderef.set(Some(self.as_html_node().as_web_sys().clone()));
1182        }
1183        self
1184    }
1185
1186    fn spread(mut self, attributes: Attributes) -> Self {
1187        attributes.apply_self(self.as_html_node());
1188        self
1189    }
1190}
sycamore_web/elements.rs

sycamore_web/
elements.rs
