feat: namespaced attributes

this commit adds namespaced attributes. This lets us support attribute groups, and thus, inline styles.

This namespaced attribute stuff is only available for styles at the moment, though it theoretically could be enabled for any other attributes.

Cargo.toml

@@ -10,6 +10,7 @@ description = "Core functionality for Dioxus - a concurrent renderer-agnostic Vi
 [dependencies]
 dioxus-core = { path="./packages/core", version="0.1.0" }
 dioxus-core-macro = { path="./packages/core-macro", version="0.1.0" }
+dioxus-html-namespace = { path="./packages/html-namespace" }
 
 dioxus-web = { path="./packages/web", optional=true }
 # dioxus-hooks = { path="./packages/hooks", version="0.0.0" }

README.md

@@ -120,8 +120,8 @@ Dioxus is heavily inspired by React, but we want your transition to feel like an
 | Fragments               | ✅      | ✅     | rsx! can return multiple elements without a root      |
 | Manual Props            | ✅      | ✅     | Manually pass in props with spread syntax             |
 | Controlled Inputs       | ✅      | ✅     | stateful wrappers around inputs                       |
+| CSS/Inline Styles       | ✅      | ✅     | syntax for inline styles/attribute groups[2]          |
 | NodeRef                 | 🛠      | ✅     | gain direct access to nodes [1]                       |
-| CSS/Inline Styles       | 🛠      | ✅     | syntax for inline styles/attribute groups[2]          |
 | 1st class global state  | 🛠      | ✅     | redux/recoil/mobx on top of context                   |
 | Suspense                | 🛠      | ✅     | schedule future render from future/promise            |
 | Cooperative Scheduling  | 🛠      | ✅     | Prioritize important events over non-important events |

examples/readme.rs

@@ -2,7 +2,9 @@
 //!
 //! The example from the README.md
 
-use dioxus::prelude::*;
+use dioxus::{events::on::MouseEvent, prelude::*};
+use dioxus_html_namespace::{button, div, h1};
+
 fn main() {
     dioxus::web::launch(Example)
 }
@@ -10,9 +12,11 @@ fn main() {
 fn Example(cx: Context<()>) -> VNode {
     let name = use_state(&cx, || "..?");
 
+    let handler = move |e: MouseEvent| e.cl;
+
     cx.render(rsx! {
         h1 { "Hello, {name}" }
-        button { "?", onclick: move |_| name.set("world!")}
+        button { "?", onclick: move |event| name.set("world!")}
         button { "?", onclick: move |_| name.set("Dioxus 🎉")}
     })
 }

packages/core-macro/src/rsx/element.rs

@@ -13,15 +13,55 @@ use syn::{
 // =======================================
 pub struct Element {
     name: Ident,
-    attrs: Vec<ElementAttr>,
+    key: Option<AttrType>,
+    attributes: Vec<ElementAttr>,
+    listeners: Vec<ElementAttr>,
     children: Vec<Node>,
 }
 
+impl ToTokens for Element {
+    fn to_tokens(&self, tokens: &mut TokenStream2) {
+        let name = &self.name;
+        // let name = &self.name.to_string();
+
+        tokens.append_all(quote! {
+            __cx.element(#name)
+        });
+
+        // Add attributes
+        // TODO: conver to the "attrs" syntax for compile-time known sizes
+        if self.attributes.len() > 0 {
+            let attr = &self.attributes;
+            tokens.append_all(quote! {
+                .attributes([ #(#attr),* ])
+            })
+        }
+
+        if self.children.len() > 0 {
+            let childs = &self.children;
+            tokens.append_all(quote! {
+                .children([ #(#childs),* ])
+            });
+        }
+
+        if self.listeners.len() > 0 {
+            let listeners = &self.listeners;
+            tokens.append_all(quote! {
+                .listeners([ #(#listeners),* ])
+            });
+        }
+
+        tokens.append_all(quote! {
+            .finish()
+        });
+    }
+}
+
 impl Parse for Element {
     fn parse(stream: ParseStream) -> Result<Self> {
-        //
         let name = Ident::parse(stream)?;
 
+        // TODO: remove this in favor of the compile-time validation system
         if !crate::util::is_valid_tag(&name.to_string()) {
             return Err(Error::new(name.span(), "Not a valid Html tag"));
         }
@@ -30,20 +70,19 @@ impl Parse for Element {
         let content: ParseBuffer;
         syn::braced!(content in stream);
 
-        let mut attrs: Vec<ElementAttr> = vec![];
+        let mut attributes: Vec<ElementAttr> = vec![];
+        let mut listeners: Vec<ElementAttr> = vec![];
         let mut children: Vec<Node> = vec![];
+        let mut key = None;
+
         'parsing: loop {
             // [1] Break if empty
             if content.is_empty() {
                 break 'parsing;
             }
 
-            let forked = content.fork();
-            if forked.call(Ident::parse_any).is_ok()
-                && forked.parse::<Token![:]>().is_ok()
-                && forked.parse::<Token![:]>().is_err()
-            {
-                attrs.push(content.parse::<ElementAttr>()?);
+            if content.peek(Ident) && content.peek2(Token![:]) && !content.peek3(Token![:]) {
+                parse_element_body(&content, &mut attributes, &mut listeners, &mut key)?;
             } else {
                 children.push(content.parse::<Node>()?);
             }
@@ -56,69 +95,22 @@ impl Parse for Element {
         }
 
         Ok(Self {
+            key,
             name,
-            attrs,
+            attributes,
             children,
+            listeners,
         })
     }
 }
 
-impl ToTokens for Element {
-    fn to_tokens(&self, tokens: &mut TokenStream2) {
-        let name = &self.name.to_string();
-
-        tokens.append_all(quote! {
-            __cx.element(#name)
-        });
-        // dioxus::builder::ElementBuilder::new(__cx, #name)
-        // dioxus::builder::ElementBuilder::new(__cx, #name)
-
-        // Add attributes
-        // TODO: conver to the "attrs" syntax for compile-time known sizes
-        for attr in self.attrs.iter() {
-            attr.to_tokens(tokens);
-        }
-
-        // let mut children = self.children.iter();
-        // while let Some(child) = children.next() {
-        //     let inner_toks = child.to_token_stream();
-        //     tokens.append_all(quote! {
-        //         .iter_child(#inner_toks)
-        //     })
-        // }
-
-        let mut childs = quote! {};
-        for child in &self.children {
-            match child {
-                Node::Text(e) => e.to_tokens(&mut childs),
-                Node::Element(e) => e.to_tokens(&mut childs),
-                Node::RawExpr(e) => quote! {
-                    __cx.fragment_from_iter(#e)
-                }
-                .to_tokens(&mut childs),
-            }
-            childs.append_all(quote! {,})
-        }
-        if self.children.len() > 0 {
-            tokens.append_all(quote! {
-                .children([
-                    #childs
-                ])
-            });
-        }
-
-        tokens.append_all(quote! {
-            .finish()
-        });
-    }
-}
-
 /// =======================================
 /// Parse a VElement's Attributes
 /// =======================================
 struct ElementAttr {
     name: Ident,
-    ty: AttrType,
+    value: AttrType,
+    namespace: Option<String>,
 }
 
 enum AttrType {
@@ -128,132 +120,142 @@ enum AttrType {
     Event(ExprClosure),
 }
 
-impl Parse for ElementAttr {
-    fn parse(s: ParseStream) -> Result<Self> {
-        let mut name = Ident::parse_any(s)?;
-        let name_str = name.to_string();
-        s.parse::<Token![:]>()?;
-
-        // Check if this is an event handler
-        // If so, parse into literal tokens
-        let ty = if name_str.starts_with("on") {
-            // remove the "on" bit
-            name = Ident::new(&name_str.trim_start_matches("on"), name.span());
-
-            if s.peek(token::Brace) {
-                let content;
-                syn::braced!(content in s);
-
-                // Try to parse directly as a closure
-                let fork = content.fork();
-                if let Ok(event) = fork.parse::<ExprClosure>() {
-                    content.advance_to(&fork);
-                    AttrType::Event(event)
-                } else {
-                    AttrType::EventTokens(content.parse()?)
-                }
+// We parse attributes and dump them into the attribute vec
+// This is because some tags might be namespaced (IE style)
+// These dedicated tags produce multiple name-spaced attributes
+fn parse_element_body(
+    stream: ParseStream,
+    attrs: &mut Vec<ElementAttr>,
+    listeners: &mut Vec<ElementAttr>,
+    key: &mut Option<AttrType>,
+) -> Result<()> {
+    let mut name = Ident::parse_any(stream)?;
+    let name_str = name.to_string();
+    stream.parse::<Token![:]>()?;
+
+    // Return early if the field is a listener
+    if name_str.starts_with("on") {
+        // remove the "on" bit
+        // name = Ident::new(&name_str.trim_start_matches("on"), name.span());
+
+        let ty = if stream.peek(token::Brace) {
+            let content;
+            syn::braced!(content in stream);
+
+            // Try to parse directly as a closure
+            let fork = content.fork();
+            if let Ok(event) = fork.parse::<ExprClosure>() {
+                content.advance_to(&fork);
+                AttrType::Event(event)
             } else {
-                AttrType::Event(s.parse()?)
+                AttrType::EventTokens(content.parse()?)
             }
         } else {
-            match name_str.as_str() {
-                "key" => {
-                    // todo: better error here
-                    AttrType::BumpText(s.parse::<LitStr>()?)
-                }
-                // "style" => {
-                //     //
-                //     todo!("inline style not yet supported")
-                // }
-                "classes" => {
-                    //
-                    todo!("custom class lsit not supported")
-                }
-                "namespace" => {
-                    //
-                    todo!("custom namespace not supported")
-                }
-                "ref" => {
-                    //
-                    todo!("custom ref not supported")
-                }
-                _ => {
-                    if s.peek(LitStr) {
-                        let rawtext = s.parse::<LitStr>().unwrap();
-                        AttrType::BumpText(rawtext)
-                    } else {
-                        let toks = s.parse::<Expr>()?;
-                        AttrType::FieldTokens(toks)
-                    }
+            AttrType::Event(stream.parse()?)
+        };
+        listeners.push(ElementAttr {
+            name,
+            value: ty,
+            namespace: None,
+        });
+        return Ok(());
+    }
+
+    let ty: AttrType = match name_str.as_str() {
+        // short circuit early if style is using the special syntax
+        "style" if stream.peek(token::Brace) => {
+            let inner;
+            syn::braced!(inner in stream);
+
+            while !inner.is_empty() {
+                let name = Ident::parse_any(&inner)?;
+                inner.parse::<Token![:]>()?;
+                let ty = if inner.peek(LitStr) {
+                    let rawtext = inner.parse::<LitStr>().unwrap();
+                    AttrType::BumpText(rawtext)
+                } else {
+                    let toks = inner.parse::<Expr>()?;
+                    AttrType::FieldTokens(toks)
+                };
+                if inner.peek(Token![,]) {
+                    let _ = inner.parse::<Token![,]>();
                 }
+                attrs.push(ElementAttr {
+                    name,
+                    value: ty,
+                    namespace: Some("style".to_string()),
+                });
             }
 
-            // let lit_str = if name_str == "style" && s.peek(token::Brace) {
-            //     // special-case to deal with literal styles.
-            //     let outer;
-            //     syn::braced!(outer in s);
-            //     // double brace for inline style.
-            //     // todo!("Style support not ready yet");
-
-            //     // if outer.peek(token::Brace) {
-            //     //     let inner;
-            //     //     syn::braced!(inner in outer);
-            //     //     let styles: Styles = inner.parse()?;
-            //     //     MaybeExpr::Literal(LitStr::new(&styles.to_string(), Span::call_site()))
-            //     // } else {
-            //     // just parse as an expression
-            //     outer.parse()?
-            // // }
-            // } else {
-            //     s.parse()?
-            // };
-        };
+            return Ok(());
+        }
+        "key" => {
+            *key = Some(AttrType::BumpText(stream.parse::<LitStr>()?));
+            return Ok(());
+        }
+        "classes" => {
+            todo!("custom class lsit not supported")
+        }
+        "namespace" => {
+            todo!("custom namespace not supported")
+        }
+        "ref" => {
+            todo!("NodeRefs are currently not supported! This is currently a reserved keyword.")
+        }
 
-        // consume comma if it exists
-        // we don't actually care if there *are* commas between attrs
-        if s.peek(Token![,]) {
-            let _ = s.parse::<Token![,]>();
+        // Fall through
+        _ => {
+            if stream.peek(LitStr) {
+                let rawtext = stream.parse::<LitStr>().unwrap();
+                AttrType::BumpText(rawtext)
+            } else {
+                let toks = stream.parse::<Expr>()?;
+                AttrType::FieldTokens(toks)
+            }
         }
+    };
 
-        Ok(ElementAttr { name, ty })
+    // consume comma if it exists
+    // we don't actually care if there *are* commas between attrs
+    if stream.peek(Token![,]) {
+        let _ = stream.parse::<Token![,]>();
     }
+
+    attrs.push(ElementAttr {
+        name,
+        value: ty,
+        namespace: None,
+    });
+    Ok(())
 }
 
 impl ToTokens for ElementAttr {
     fn to_tokens(&self, tokens: &mut TokenStream2) {
         let name = self.name.to_string();
         let nameident = &self.name;
-        let _attr_stream = TokenStream2::new();
-
-        match &self.ty {
-            AttrType::BumpText(value) => match name.as_str() {
-                "key" => {
-                    tokens.append_all(quote! {
-                        .key2(format_args_f!(#value))
-                    });
-                }
-                _ => {
-                    tokens.append_all(quote! {
-                        .attr(#name, format_args_f!(#value))
-                    });
-                }
-            },
-            AttrType::FieldTokens(exp) => {
-                tokens.append_all(quote! {
-                    .attr(#name, #exp)
-                });
-            }
-            AttrType::Event(event) => {
-                tokens.append_all(quote! {
-                    .add_listener(dioxus::events::on::#nameident(__cx, #event))
-                });
-            }
-            AttrType::EventTokens(event) => {
-                //
-                tokens.append_all(quote! {
-                    .add_listener(dioxus::events::on::#nameident(__cx, #event))
-                });
-            }
+
+        let namespace = match &self.namespace {
+            Some(t) => quote! { Some(#t) },
+            None => quote! { None },
+        };
+
+        match &self.value {
+            AttrType::BumpText(value) => tokens.append_all(quote! {
+                __cx.attr(#name, format_args_f!(#value), #namespace)
+            }),
+
+            AttrType::FieldTokens(exp) => tokens.append_all(quote! {
+                __cx.attr(#name, #exp, #namespace)
+            }),
+
+            // todo: move event handlers on to the elements or onto the nodefactory
+            AttrType::Event(event) => tokens.append_all(quote! {
+                dioxus::events::on::#nameident(__cx, #event)
+            }),
+
+            AttrType::EventTokens(event) => tokens.append_all(quote! {
+                dioxus::events::on::#nameident(__cx, #event)
+            }),
         }
     }
 }

packages/core-macro/src/rsx/mod.rs

@@ -80,33 +80,19 @@ impl ToTokens for RsxRender {
             quote! {#inner}
         } else {
             let childs = &self.roots;
-            let children = quote! {
-                ChildrenList::new(__cx)
-                    #( .add_child(#childs) )*
-                    .finish()
-            };
-            quote! {
-                // #key_token,
-                dioxus::builder::vfragment(
-                    __cx,
-                    None,
-                    #children
-                )
-            }
+            quote! { __cx.fragment_from_iter(&[ #(#childs),* ]) }
         };
 
         match &self.custom_context {
             // The `in cx` pattern allows directly rendering
             Some(ident) => out_tokens.append_all(quote! {
-                #ident.render(dioxus::prelude::LazyNodes::new(move |__cx|{
-                    // let bump = &__cx.bump();
+                #ident.render(dioxus::prelude::LazyNodes::new(move |__cx: &NodeFactory|{
                     #inner
                 }))
             }),
             // Otherwise we just build the LazyNode wrapper
             None => out_tokens.append_all(quote! {
                 dioxus::prelude::LazyNodes::new(move |__cx: &NodeFactory|{
-                    // let bump = &__cx.bump();
                     #inner
                  })
             }),

packages/core-macro/src/rsx/node.rs

@@ -21,7 +21,9 @@ impl ToTokens for Node {
         match &self {
             Node::Element(el) => el.to_tokens(tokens),
             Node::Text(txt) => txt.to_tokens(tokens),
-            Node::RawExpr(exp) => exp.to_tokens(tokens),
+            Node::RawExpr(exp) => tokens.append_all(quote! {
+                 __cx.fragment_from_iter(#exp)
+            }),
         }
     }
 }

packages/core/src/diff.rs

@@ -1326,69 +1326,69 @@ mod tests {
     use crate::util::DebugDom;
     use dioxus_core_macro::*;
 
-    #[test]
-    fn test_child_iterator() {
-        static App: FC<()> = |cx| {
-            cx.render(rsx! {
-                Fragment {
-                    div {}
-                    h1 {}
-                    h2 {}
-                    h3 {}
-                    Fragment {
-                        "internal node"
-                        div {
-                            "baller text shouldn't show up"
-                        }
-                        p {
-
-                        }
-                        Fragment {
-                            Fragment {
-                                "wow you really like framgents"
-                                Fragment {
-                                    "why are you like this"
-                                    Fragment {
-                                        "just stop now please"
-                                        Fragment {
-                                            "this hurts"
-                                            Fragment {
-                                                "who needs this many fragments?????"
-                                                Fragment {
-                                                    "just... fine..."
-                                                    Fragment {
-                                                        "no"
-                                                    }
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                    "my text node 1"
-                    "my text node 2"
-                    "my text node 3"
-                    "my text node 4"
-                }
-            })
-        };
-        let mut dom = VirtualDom::new(App);
-        let mut renderer = DebugDom::new();
-        dom.rebuild(&mut renderer).unwrap();
-        let starter = dom.base_scope().root();
-        let ite = RealChildIterator::new(starter, &dom.components);
-        for child in ite {
-            match child {
-                VNode::Element(el) => println!("Found: Element {}", el.tag_name),
-                VNode::Text(t) => println!("Found: Text {:?}", t.text),
-
-                // These would represent failing cases.
-                VNode::Fragment(_) => panic!("Found: Fragment"),
-                VNode::Suspended { real } => panic!("Found: Suspended"),
-                VNode::Component(_) => panic!("Found: Component"),
-            }
-        }
-    }
+    // #[test]
+    // fn test_child_iterator() {
+    //     static App: FC<()> = |cx| {
+    //         cx.render(rsx! {
+    //             Fragment {
+    //                 div {}
+    //                 h1 {}
+    //                 h2 {}
+    //                 h3 {}
+    //                 Fragment {
+    //                     "internal node"
+    //                     div {
+    //                         "baller text shouldn't show up"
+    //                     }
+    //                     p {
+
+    //                     }
+    //                     Fragment {
+    //                         Fragment {
+    //                             "wow you really like framgents"
+    //                             Fragment {
+    //                                 "why are you like this"
+    //                                 Fragment {
+    //                                     "just stop now please"
+    //                                     Fragment {
+    //                                         "this hurts"
+    //                                         Fragment {
+    //                                             "who needs this many fragments?????"
+    //                                             Fragment {
+    //                                                 "just... fine..."
+    //                                                 Fragment {
+    //                                                     "no"
+    //                                                 }
+    //                                             }
+    //                                         }
+    //                                     }
+    //                                 }
+    //                             }
+    //                         }
+    //                     }
+    //                 }
+    //                 "my text node 1"
+    //                 "my text node 2"
+    //                 "my text node 3"
+    //                 "my text node 4"
+    //             }
+    //         })
+    //     };
+    //     let mut dom = VirtualDom::new(App);
+    //     let mut renderer = DebugDom::new();
+    //     dom.rebuild(&mut renderer).unwrap();
+    //     let starter = dom.base_scope().root();
+    //     let ite = RealChildIterator::new(starter, &dom.components);
+    //     for child in ite {
+    //         match child {
+    //             VNode::Element(el) => println!("Found: Element {}", el.tag_name),
+    //             VNode::Text(t) => println!("Found: Text {:?}", t.text),
+
+    //             // These would represent failing cases.
+    //             VNode::Fragment(_) => panic!("Found: Fragment"),
+    //             VNode::Suspended { real } => panic!("Found: Suspended"),
+    //             VNode::Component(_) => panic!("Found: Component"),
+    //         }
+    //     }
+    // }
 }

packages/core/src/events.rs

@@ -123,10 +123,25 @@ pub mod on {
     use super::VirtualEvent;
 
     macro_rules! event_directory {
-        ( $( $eventdata:ident($wrapper:ident): [ $( $name:ident )* ]; )* ) => {
+        ( $(
             $(
+                #[$attr:meta]
+            )*
+            $eventdata:ident($wrapper:ident): [
+                $(
+                    #[$method_attr:meta]
+                )*
+                $( $name:ident )*
+            ];
+        )* ) => {
+            $(
+                $(#[$attr])*
                 #[derive(Debug)]
                 pub struct $wrapper(pub Rc<dyn $eventdata>);
+
+                // todo: derefing to the event is fine (and easy) but breaks some IDE stuff like (go to source)
+                // going to source in fact takes you to the source of Rc which is... less than useful
+                // Either we ask for this to be changed in Rust-analyzer or manually impkement the trait
                 impl Deref for $wrapper {
                     type Target = Rc<dyn $eventdata>;
                     fn deref(&self) -> &Self::Target {
@@ -134,6 +149,7 @@ pub mod on {
                     }
                 }
 
+                $(#[$method_attr])*
                 $(
                     pub fn $name<'a>(
                         c: &'_ NodeFactory<'a>,
@@ -155,17 +171,112 @@ pub mod on {
         };
     }
 
+    // The Dioxus Synthetic event system
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
     event_directory! {
-        ClipboardEventInner(ClipboardEvent): [copy cut paste];
-        CompositionEventInner(CompositionEvent): [compositionend compositionstart compositionupdate];
-        KeyboardEventInner(KeyboardEvent): [keydown keypress keyup];
-        FocusEventInner(FocusEvent): [focus blur];
-        FormEventInner(FormEvent): [change input invalid reset submit];
+
+
+
+
+        ClipboardEventInner(ClipboardEvent): [
+            /// Called when "copy"
+            oncopy
+            oncut
+            onpaste
+        ];
+        CompositionEventInner(CompositionEvent): [
+            oncompositionend
+            oncompositionstart
+            oncompositionupdate
+        ];
+        KeyboardEventInner(KeyboardEvent): [
+            onkeydown
+            onkeypress
+            onkeyup
+        ];
+        FocusEventInner(FocusEvent): [
+            onfocus
+            onblur
+        ];
+        FormEventInner(FormEvent): [
+            onchange
+            oninput
+            oninvalid
+            onreset
+            onsubmit
+        ];
+
+
+        /// A synthetic event that wraps a web-style [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+        ///
+        ///
+        /// The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
+        ///
+        /// ## Trait implementation:
+        /// ```rust
+        ///     fn alt_key(&self) -> bool;
+        ///     fn button(&self) -> i16;
+        ///     fn buttons(&self) -> u16;
+        ///     fn client_x(&self) -> i32;
+        ///     fn client_y(&self) -> i32;
+        ///     fn ctrl_key(&self) -> bool;
+        ///     fn meta_key(&self) -> bool;
+        ///     fn page_x(&self) -> i32;
+        ///     fn page_y(&self) -> i32;
+        ///     fn screen_x(&self) -> i32;
+        ///     fn screen_y(&self) -> i32;
+        ///     fn shift_key(&self) -> bool;
+        ///     fn get_modifier_state(&self, key_code: &str) -> bool;
+        /// ```
+        ///
+        /// ## Event Handlers
+        /// - click
+        /// - contextmenu
+        /// - doubleclick
+        /// - drag
+        /// - dragend
+        /// - dragenter
+        /// - dragexit
+        /// - dragleave
+        /// - dragover
+        /// - dragstart
+        /// - drop
+        /// - mousedown
+        /// - mouseenter
+        /// - mouseleave
+        /// - mousemove
+        /// - mouseout
+        /// - mouseover
+        /// - mouseup
         MouseEventInner(MouseEvent): [
-            click contextmenu doubleclick drag dragend dragenter dragexit
-            dragleave dragover dragstart drop mousedown mouseenter mouseleave
-            mousemove mouseout mouseover mouseup
+            /// Onclick!
+            onclick
+            oncontextmenu
+            ondoubleclick
+            ondrag
+            ondragend
+            ondragenter
+            ondragexit
+            ondragleave
+            ondragover
+            ondragstart
+            ondrop
+            onmousedown
+            onmouseenter
+            onmouseleave
+            onmousemove
+            onmouseout
+            onmouseover
+            onmouseup
         ];
+
         PointerEventInner(PointerEvent): [
             pointerdown pointermove pointerup pointercancel gotpointercapture
             lostpointercapture pointerenter pointerleave pointerover pointerout
@@ -293,6 +404,8 @@ pub mod on {
         fn alt_key(&self) -> bool;
         fn button(&self) -> i16;
         fn buttons(&self) -> u16;
+
+        /// Get the X coordinate of the mouse relative to the window
         fn client_x(&self) -> i32;
         fn client_y(&self) -> i32;
         fn ctrl_key(&self) -> bool;
@@ -597,25 +710,25 @@ pub mod on {
     }
 }
 
-mod tests {
+// mod tests {
 
-    use std::rc::Rc;
+//     use std::rc::Rc;
 
-    use crate as dioxus;
-    use crate::events::on::MouseEvent;
-    use crate::prelude::*;
+//     use crate as dioxus;
+//     use crate::events::on::MouseEvent;
+//     use crate::prelude::*;
 
-    fn autocomplete() {
-        // let v = move |evt| {
-        //     let r = evt.alt_key();
-        // };
+//     fn autocomplete() {
+//         // let v = move |evt| {
+//         //     let r = evt.alt_key();
+//         // };
 
-        let g = rsx! {
-            button {
-                onclick: move |evt| {
-                    let r = evt.alt_key();
-                }
-            }
-        };
-    }
-}
+//         let g = rsx! {
+//             button {
+//                 onclick: move |evt| {
+//                     let r = evt.alt_key();
+//                 }
+//             }
+//         };
+//     }
+// }

packages/core/src/lib.rs

@@ -13,6 +13,7 @@ pub mod serialize;
 
 pub mod arena;
 pub mod component;
+pub mod styles;
 pub mod util; // Logic for extending FC
 
 pub mod debug_renderer;
@@ -54,6 +55,7 @@ pub(crate) mod innerlude {
 pub mod prelude {
     pub use crate::component::{fc_to_builder, Fragment, Properties};
     use crate::nodes;
+    pub use crate::styles::{AsAttr, StyleBuilder};
     pub use crate::virtual_dom::Context;
     pub use crate::virtual_dom::Scoped;
     pub use nodes::*;
@@ -61,7 +63,7 @@ pub mod prelude {
     pub use crate::nodebuilder::LazyNodes;
 
     pub use crate::nodebuilder::ChildrenList;
-    pub use crate::nodebuilder::NodeFactory;
+    pub use crate::nodebuilder::{DioxusElement, NodeFactory};
     // pub use nodes::iterables::IterableNodes;
     /// This type alias is an internal way of abstracting over the static functions that represent components.
     pub use crate::innerlude::FC;

packages/core/src/nodebuilder.rs

@@ -13,7 +13,7 @@ use bumpalo::Bump;
 
 use crate::{
     events::VirtualEvent,
-    innerlude::{Properties, VComponent, FC},
+    innerlude::{Properties, VComponent, VText, FC},
     nodes::{Attribute, Listener, NodeKey, VNode},
     prelude::{VElement, VFragment},
     virtual_dom::{RealDomNode, Scope},
@@ -34,7 +34,6 @@ where
     cx: &'b NodeFactory<'a>,
     key: NodeKey<'a>,
     tag_name: &'static str,
-    // tag_name: &'a str,
     listeners: Listeners,
     attributes: Attributes,
     children: Children,
@@ -422,7 +421,11 @@ where
             }
         };
 
-        self.attributes.push(Attribute { name, value });
+        self.attributes.push(Attribute {
+            name,
+            value,
+            namespace: None,
+        });
         self
     }
 
@@ -455,7 +458,11 @@ where
     /// ```
     pub fn bool_attr(mut self, name: &'static str, should_add: bool) -> Self {
         if should_add {
-            self.attributes.push(Attribute { name, value: "" });
+            self.attributes.push(Attribute {
+                name,
+                value: "",
+                namespace: None,
+            });
         }
         self
     }
@@ -659,13 +666,17 @@ pub fn text3<'a>(bump: &'a bumpalo::Bump, args: std::fmt::Arguments) -> VNode<'a
     // ```
     //  div {"abc"}
     // ```
+    VNode::text(raw_text(bump, args))
+}
+
+pub fn raw_text<'a>(bump: &'a bumpalo::Bump, args: std::fmt::Arguments) -> &'a str {
     match args.as_str() {
-        Some(static_str) => VNode::text(static_str),
+        Some(static_str) => static_str,
         None => {
             use bumpalo::core_alloc::fmt::Write;
             let mut s = bumpalo::collections::String::new_in(bump);
             s.write_fmt(args).unwrap();
-            VNode::text(s.into_bump_str())
+            s.into_bump_str()
         }
     }
 }
@@ -683,7 +694,11 @@ pub fn text3<'a>(bump: &'a bumpalo::Bump, args: std::fmt::Arguments) -> VNode<'a
 /// let my_id_attr = attr("id", "my-id");
 /// ```
 pub fn attr<'a>(name: &'static str, value: &'a str) -> Attribute<'a> {
-    Attribute { name, value }
+    Attribute {
+        name,
+        value,
+        namespace: None,
+    }
 }
 
 pub fn virtual_child<'a, T: Properties + 'a>(
@@ -762,7 +777,7 @@ impl<'a> NodeFactory<'a> {
     /// Create an element builder
     pub fn element<'b>(
         &'b self,
-        tag_name: &'static str,
+        tag: impl DioxusElement,
     ) -> ElementBuilder<
         'a,
         'b,
@@ -770,7 +785,21 @@ impl<'a> NodeFactory<'a> {
         bumpalo::collections::Vec<'a, Attribute<'a>>,
         bumpalo::collections::Vec<'a, VNode<'a>>,
     > {
-        ElementBuilder::new(self, tag_name)
+        ElementBuilder::new(self, tag.tag_name())
+    }
+
+    pub fn attr(
+        &self,
+        name: &'static str,
+        val: Arguments<'a>,
+        namespace: Option<&'static str>,
+    ) -> Attribute<'a> {
+        let value = raw_text(self.bump(), val);
+        Attribute {
+            name,
+            value,
+            namespace,
+        }
     }
 
     pub fn child_list(&self) -> ChildrenList {
@@ -813,3 +842,11 @@ impl Debug for NodeFactory<'_> {
         Ok(())
     }
 }
+
+pub trait DioxusElement {
+    const TAG_NAME: &'static str;
+    const NAME_SPACE: Option<&'static str>;
+    fn tag_name(&self) -> &'static str {
+        Self::TAG_NAME
+    }
+}

packages/core/src/nodes.rs

@@ -216,6 +216,11 @@ pub struct VElement<'a> {
 pub struct Attribute<'a> {
     pub name: &'static str,
     pub value: &'a str,
+
+    /// If an attribute is "namespaced", then it belongs to a group
+    /// The most common namespace is the "style" namespace
+    // pub is_dynamic: bool,
+    pub namespace: Option<&'static str>,
 }
 
 impl<'a> Attribute<'a> {

packages/core/src/styles.rs

@@ -1,83 +1,119 @@
 //! Dedicated styling system for Components
 //! ---------------------------------------
 //!
+//! In the future, we'd like to move this out of Dioxus core or build a better, more general abstraction. For now, dedicated
+//! styling is more-or-less hardcoded into Dioxus.
 //!
 //!
 //!
 //!
 //!
 //!
+//!
+//!
+
+use crate::{
+    innerlude::Attribute,
+    nodebuilder::{text3, NodeFactory},
+};
+
+pub struct StyleBuilder;
+pub trait AsAttr<'a> {
+    fn to_attr(self, field: &'static str, fac: &NodeFactory<'a>) -> Attribute<'a>;
+}
+impl<'a> AsAttr<'a> for std::fmt::Arguments<'a> {
+    fn to_attr(self, field: &'static str, fac: &NodeFactory<'a>) -> Attribute<'a> {
+        fac.attr(field, self, Some("style"))
+    }
+}
+
+macro_rules! build_styles {
+    ($ ($name:ident: $lit:literal,)* ) => {
+        impl StyleBuilder {
+            $(
+                pub fn $name<'a>(f: &NodeFactory<'a>, args: impl AsAttr<'a>) -> Attribute<'a> {
+                    args.to_attr($lit, f)
+                }
+            )*
+        }
+    };
+}
+
+build_styles! {
+    background: "background",
+    background_attachment: "background-attachment",
+    background_color: "background-color",
+    background_image: "background-image",
+    background_position: "background-position",
+    background_repeat: "background-repeat",
+    border: "border",
+    border_bottom: "border-bottom",
+    border_bottom_color: "border-bottom-color",
+    border_bottom_style: "border-bottom-style",
+    border_bottom_width: "border-bottom-width",
+    border_color: "border-color",
+    border_left: "border-left",
+    border_left_color: "border-left-color",
+    border_left_style: "border-left-style",
+    border_left_width: "border-left-width",
+    border_right: "border-right",
+    border_right_color: "border-right-color",
+    border_right_style: "border-right-style",
+    border_right_width: "border-right-width",
+    border_style: "border-style",
+    border_top: "border-top",
+    border_top_color: "border-top-color",
+    border_top_style: "border-top-style",
+    border_top_width: "border-top-width",
+    border_width: "border-width",
+    clear: "clear",
+    clip: "clip",
+    color: "color",
+    cursor: "cursor",
+    display: "display",
+    filter: "filter",
+    css_float: "css-float",
+    font: "font",
+    font_family: "font-family",
+    font_size: "font-size",
+    font_variant: "font-variant",
+    font_weight: "font-weight",
+    height: "height",
+    left: "left",
+    letter_spacing: "letter-spacing",
+    line_height: "line-height",
+    list_style: "list-style",
+    list_style_image: "list-style-image",
+    list_style_position: "list-style-position",
+    list_style_type: "list-style-type",
+    margin: "margin",
+    margin_bottom: "margin-bottom",
+    margin_left: "margin-left",
+    margin_right: "margin-right",
+    margin_top: "margin-top",
+    overflow: "overflow",
+    padding: "padding",
+    padding_bottom: "padding-bottom",
+    padding_left: "padding-left",
+    padding_right: "padding-right",
+    padding_top: "padding-top",
+    page_break_after: "page-break-after",
+    page_break_before: "page-break-before",
+    position: "position",
+    stroke_dasharray: "stroke-dasharray",
+    stroke_dashoffset: "stroke-dashoffset",
+    text_align: "text-align",
+    text_decoration: "text-decoration",
+    text_indent: "text-indent",
+    text_transform: "text-transform",
+    top: "top",
+    vertical_align: "vertical-align",
+    visibility: "visibility",
+    width: "width",
+    z_index: "z-index",
+}
 
-enum Styles {
-    background,
-    backgroundAttachment,
-    backgroundColor,
-    backgroundImage,
-    backgroundPosition,
-    backgroundRepeat,
-    border,
-    borderBottom,
-    borderBottomColor,
-    borderBottomStyle,
-    borderBottomWidth,
-    borderColor,
-    borderLeft,
-    borderLeftColor,
-    borderLeftStyle,
-    borderLeftWidth,
-    borderRight,
-    borderRightColor,
-    borderRightStyle,
-    borderRightWidth,
-    borderStyle,
-    borderTop,
-    borderTopColor,
-    borderTopStyle,
-    borderTopWidth,
-    borderWidth,
-    clear,
-    clip,
-    color,
-    cursor,
-    display,
-    filter,
-    cssFloat,
-    font,
-    fontFamily,
-    fontSize,
-    fontVariant,
-    fontWeight,
-    height,
-    left,
-    letterSpacing,
-    lineHeight,
-    listStyle,
-    listStyleImage,
-    listStylePosition,
-    listStyleType,
-    margin,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    marginTop,
-    overflow,
-    padding,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    pageBreakAfter,
-    pageBreakBefore,
-    position,
-    strokeDasharray,
-    strokeDashoffset,
-    textAlign,
-    textDecoration,
-    textIndent,
-    textTransform,
-    top,
-    verticalAlign,
-    visibility,
-    width,
-    zIndex,
+fn example(f: &NodeFactory) {
+    let style_list = &[("width", "10"), ("text-decoration", "")];
+    let styles = &[StyleBuilder::background(f, format_args!("10"))];
 }

packages/html-namespace/Cargo.toml

@@ -6,6 +6,7 @@ edition = "2018"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
+dioxus-core = { path="../core" }
 
 [dev-dependencies]
 scraper = "0.12.0"

packages/html-namespace/examples/attrlist.html

@@ -1,2598 +0,0 @@
-<tbody>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/accept">accept</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>List of types the server accepts, typically a file type.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/form#attr-accept-charset"
-          >accept-charset</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a>
-    </td>
-    <td>List of supported charsets.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey"
-          >accesskey</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Keyboard shortcut to activate or add focus to the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/action"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >action</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a>
-    </td>
-    <td>
-      The URI of a program that processes the information submitted via the
-      form.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/align"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >align</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/applet"
-        ><code>&lt;applet&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/caption"
-        ><code>&lt;caption&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/colgroup"
-        ><code>&lt;colgroup&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/hr"><code>&lt;hr&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/tfoot"
-        ><code>&lt;tfoot&gt;</code></a
-      >
-      , <a href="/en-US/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/tr"><code>&lt;tr&gt;</code></a>
-    </td>
-    <td>Specifies the horizontal alignment of the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/iframe#attr-allow"
-          >allow</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >
-    </td>
-    <td>Specifies a feature-policy for the iframe.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/alt"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >alt</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/applet"
-        ><code>&lt;applet&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>Alternative text in case an image can't be displayed.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/script#attr-async"
-          >async</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >
-    </td>
-    <td>Executes the script asynchronously.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/autocapitalize"
-          >autocapitalize</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>
-      Sets whether input is automatically capitalized when entered by user
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/autocomplete"
-          >autocomplete</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates whether controls in this form can by default have their values
-      automatically completed by the browser.
-    </td>
-  </tr>
-  <tr>
-    <td id="attr-autofocus">
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/autofocus"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >autofocus</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/keygen"
-        ><code>&lt;keygen&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>The element should be automatically focused after the page loaded.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/autoplay"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >autoplay</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>The audio or video should play as soon as possible.</td>
-  </tr>
-  <tr>
-    <td><code>background</code></td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>
-    </td>
-    <td>
-      Specifies the URL of an image file.
-      <div class="note notecard">
-        <strong>Note:</strong> Although browsers and email clients may still
-        support this attribute, it is obsolete. Use CSS
-        <a href="/en-US/docs/Web/CSS/background-image"
-          ><code>background-image</code></a
-        >
-        instead.
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td><code>bgcolor</code></td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/colgroup"
-        ><code>&lt;colgroup&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/marquee"
-        ><code>&lt;marquee&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/tfoot"><code>&lt;tfoot&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/tr"><code>&lt;tr&gt;</code></a>
-    </td>
-    <td>
-      <p>Background color of the element.</p>
-
-      <div class="note notecard">
-        <p>
-          <strong>Note:</strong> This is a legacy attribute. Please use the CSS
-          <a href="/en-US/docs/Web/CSS/background-color"
-            ><code>background-color</code></a
-          >
-          property instead.
-        </p>
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td><code>border</code></td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/table"
-        ><code>&lt;table&gt;</code></a
-      >
-    </td>
-    <td>
-      <p>The border width.</p>
-
-      <div class="note notecard">
-        <p>
-          <strong>Note:</strong> This is a legacy attribute. Please use the CSS
-          <a href="/en-US/docs/Web/CSS/border"><code>border</code></a> property
-          instead.
-        </p>
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/buffered"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >buffered</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>Contains the time range of already buffered media.</td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/capture">capture</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>
-      From the
-      <a
-        href="https://w3c.github.io/html-media-capture/#the-capture-attribute"
-        hreflang="en"
-        lang="en"
-        class="external"
-        rel=" noopener"
-        >HTML Media Capture<br /><small lang="en-US"
-          >The definition of 'media capture' in that specification.</small
-        ></a
-      >spec, specifies a new file can be captured.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/keygen#attr-challenge"
-          >challenge</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/keygen"
-        ><code>&lt;keygen&gt;</code></a
-      >
-    </td>
-    <td>A challenge string that is submitted along with the public key.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/charset"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >charset</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >
-    </td>
-    <td>Declares the character encoding of the page or script.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/checked"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >checked</a
-        ></code
-      >
-    </td>
-    <td>
-      <a
-        href="/en-US/docs/Web/HTML/Element/command"
-        class="page-not-created"
-        title="This is a link to an unwritten page"
-        ><code>&lt;command&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>Indicates whether the element should be checked on page load.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/cite"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >cite</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/blockquote"
-        ><code>&lt;blockquote&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a>
-    </td>
-    <td>Contains a URI which points to the source of the quote or change.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Often used with CSS to style elements with common properties.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/applet#attr-code">code</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/applet"
-        ><code>&lt;applet&gt;</code></a
-      >
-    </td>
-    <td>
-      Specifies the URL of the applet's class file to be loaded and executed.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/applet#attr-codebase"
-          >codebase</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/applet"
-        ><code>&lt;applet&gt;</code></a
-      >
-    </td>
-    <td>
-      This attribute gives the absolute or relative URL of the directory where
-      applets' .class files referenced by the code attribute are stored.
-    </td>
-  </tr>
-  <tr>
-    <td><code>color</code></td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/basefont"
-        ><code>&lt;basefont&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/font"><code>&lt;font&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/hr"><code>&lt;hr&gt;</code></a>
-    </td>
-    <td>
-      <p>
-        This attribute sets the text color using either a named color or a color
-        specified in the hexadecimal #RRGGBB format.
-      </p>
-
-      <div class="note notecard">
-        <p>
-          <strong>Note:</strong> This is a legacy attribute. Please use the CSS
-          <a href="/en-US/docs/Web/CSS/color"><code>color</code></a> property
-          instead.
-        </p>
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/textarea#attr-cols"
-          >cols</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Defines the number of columns in a textarea.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/colspan"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >colspan</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>
-    </td>
-    <td>
-      The colspan attribute defines the number of columns a cell should span.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/meta#attr-content"
-          >content</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a>
-    </td>
-    <td>
-      A value associated with <code>http-equiv</code> or
-      <code>name</code> depending on the context.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable"
-          >contenteditable</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Indicates whether the element's content is editable.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/contextmenu"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >contextmenu</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>
-      Defines the ID of a
-      <a href="/en-US/docs/Web/HTML/Element/menu"><code>&lt;menu&gt;</code></a>
-      element which will serve as the element's context menu.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/controls"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >controls</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates whether the browser should show playback controls to the user.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/area#attr-coords"
-          >coords</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>
-    </td>
-    <td>A set of values specifying the coordinates of the hot-spot region.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/crossorigin"
-          >crossorigin</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>How the element handles cross-origin requests</td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/API/HTMLIFrameElement/csp">csp</a></code>
-      <svg class="icon icon-experimental" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-experimental"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >
-    </td>
-    <td>
-      Specifies the Content Security Policy that an embedded document must agree
-      to enforce upon itself.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/object#attr-data">data</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >
-    </td>
-    <td>Specifies the URL of the resource.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"
-          >data-*</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Lets you attach custom attributes to an HTML element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/datetime"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >datetime</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a>
-    </td>
-    <td>Indicates the date and time associated with the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/img#attr-decoding"
-          >decoding</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a>
-    </td>
-    <td>Indicates the preferred method to decode the image.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/track#attr-default"
-          >default</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/track"
-        ><code>&lt;track&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates that the track should be enabled unless the user's preferences
-      indicate something different.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/script#attr-defer"
-          >defer</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates that the script should be executed after the page has been
-      parsed.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>
-      Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl
-      (Right-To-Left)
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/dirname"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >dirname</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/disabled">disabled</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a
-        href="/en-US/docs/Web/HTML/Element/command"
-        class="page-not-created"
-        title="This is a link to an unwritten page"
-        ><code>&lt;command&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/fieldset"
-        ><code>&lt;fieldset&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/keygen"
-        ><code>&lt;keygen&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/optgroup"
-        ><code>&lt;optgroup&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/option"
-        ><code>&lt;option&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Indicates whether the user can interact with the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/download"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >download</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>
-    </td>
-    <td>
-      Indicates that the hyperlink is to be used for downloading a resource.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/draggable"
-          >draggable</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Defines whether the element can be dragged.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/form#attr-enctype"
-          >enctype</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a>
-    </td>
-    <td>
-      Defines the content type of the form data when the <code>method</code> is
-      POST.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/enterkeyhint"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >enterkeyhint</a
-        ></code
-      >
-      <svg class="icon icon-experimental" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-experimental"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable"
-        ><code>contenteditable</code></a
-      >
-    </td>
-    <td>
-      The
-      <a
-        href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute"
-        class="external"
-        rel=" noopener"
-        ><code>enterkeyhint</code></a
-      >
-      specifies what action label (or icon) to present for the enter key on
-      virtual keyboards. The attribute can be used with form controls (such as
-      the value of <code>textarea</code> elements), or in elements in an editing
-      host (e.g., using <code>contenteditable</code> attribute).
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/for">for</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/label"><code>&lt;label&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/output"
-        ><code>&lt;output&gt;</code></a
-      >
-    </td>
-    <td>Describes elements which belongs to this one.</td>
-  </tr>
-  <tr>
-    <td id="attr-form">
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/form"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >form</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/fieldset"
-        ><code>&lt;fieldset&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/keygen"
-        ><code>&lt;keygen&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/label"><code>&lt;label&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/meter"><code>&lt;meter&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/output"
-        ><code>&lt;output&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/progress"
-        ><code>&lt;progress&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Indicates the form that is the owner of the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/formaction"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >formaction</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates the action of the element, overriding the action defined in the
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a
-      >.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/formenctype"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >formenctype</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>
-      If the button/input is a submit button (<code>type="submit"</code>), this
-      attribute sets the encoding type to use during form submission. If this
-      attribute is specified, it overrides the <code>enctype</code> attribute of
-      the button's <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/formmethod"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >formmethod</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>
-      If the button/input is a submit button (<code>type="submit"</code>), this
-      attribute sets the submission method to use during form submission
-      (<code>GET</code>, <code>POST</code>, etc.). If this attribute is
-      specified, it overrides the <code>method</code> attribute of the button's
-      <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/formnovalidate"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >formnovalidate</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>
-      If the button/input is a submit button (<code>type="submit"</code>), this
-      boolean attribute specifies that the form is not to be validated when it
-      is submitted. If this attribute is specified, it overrides the
-      <code>novalidate</code> attribute of the button's
-      <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/formtarget"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >formtarget</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>
-      If the button/input is a submit button (<code>type="submit"</code>), this
-      attribute specifies the browsing context (for example, tab, window, or
-      inline frame) in which to display the response that is received after
-      submitting the form. If this attribute is specified, it overrides the
-      <code>target</code> attribute of the button's
-      <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/headers"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >headers</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>
-    </td>
-    <td>
-      IDs of the <code>&lt;th&gt;</code> elements which applies to this element.
-    </td>
-  </tr>
-  <tr>
-    <td><code>height</code></td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/canvas"
-        ><code>&lt;canvas&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>
-      <p>
-        Specifies the height of elements listed here. For all other elements,
-        use the CSS
-        <a href="/en-US/docs/Web/CSS/height"><code>height</code></a> property.
-      </p>
-
-      <div class="note notecard">
-        <p>
-          <strong>Note:</strong> In some instances, such as
-          <a href="/en-US/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a
-          >, this is a legacy attribute, in which case the CSS
-          <a href="/en-US/docs/Web/CSS/height"><code>height</code></a> property
-          should be used instead.
-        </p>
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/hidden"
-          >hidden</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>
-      Prevents rendering of given element, while keeping child elements, e.g.
-      script elements, active.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/meter#attr-high">high</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/meter"
-        ><code>&lt;meter&gt;</code></a
-      >
-    </td>
-    <td>Indicates the lower bound of the upper range.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/href"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >href</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>
-    </td>
-    <td>The URL of a linked resource.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/hreflang"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >hreflang</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>
-    </td>
-    <td>Specifies the language of the linked resource.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/meta#attr-http-equiv"
-          >http-equiv</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a>
-    </td>
-    <td>Defines a pragma directive.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Element/command#attr-icon"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >icon</a
-        ></code
-      >
-    </td>
-    <td>
-      <a
-        href="/en-US/docs/Web/HTML/Element/command"
-        class="page-not-created"
-        title="This is a link to an unwritten page"
-        ><code>&lt;command&gt;</code></a
-      >
-    </td>
-    <td>Specifies a picture which represents the command.</td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>
-      Often used with CSS to style a specific element. The value of this
-      attribute must be unique.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/importance"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >importance</a
-        ></code
-      >
-      <svg class="icon icon-experimental" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-experimental"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >
-    </td>
-    <td>Indicates the relative fetch priority for the resource.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/Security/Subresource_Integrity"
-          >integrity</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >
-    </td>
-    <td>
-      <p>
-        Specifies a
-        <a href="/en-US/docs/Web/Security/Subresource_Integrity"
-          >Subresource Integrity</a
-        >
-        value that allows browsers to verify what they fetch.
-      </p>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img#attr-intrinsicsize"
-        ><code>intrinsicsize</code></a
-      >
-      <svg class="icon icon-deprecated" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-deprecated"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a>
-    </td>
-    <td>
-      This attribute tells the browser to ignore the actual intrinsic size of
-      the image and pretend it’s the size specified in the attribute.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes/inputmode"
-        ><code>inputmode</code></a
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable"
-        ><code>contenteditable</code></a
-      >
-    </td>
-    <td>
-      Provides a hint as to the type of data that might be entered by the user
-      while editing the element or its contents. The attribute can be used with
-      form controls (such as the value of <code>textarea</code> elements), or in
-      elements in an editing host (e.g., using
-      <code>contenteditable</code> attribute).
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/img#attr-ismap">ismap</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a>
-    </td>
-    <td>Indicates that the image is part of a server-side image map.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop"
-          >itemprop</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/keygen#attr-keytype"
-          >keytype</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/keygen"
-        ><code>&lt;keygen&gt;</code></a
-      >
-    </td>
-    <td>Specifies the type of key generated.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/track#attr-kind">kind</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/track"
-        ><code>&lt;track&gt;</code></a
-      >
-    </td>
-    <td>Specifies the kind of text track.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/label"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >label</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/optgroup"
-        ><code>&lt;optgroup&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/option"
-        ><code>&lt;option&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/track"
-        ><code>&lt;track&gt;</code></a
-      >
-    </td>
-    <td>Specifies a user-readable title of the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Defines the language used in the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/script#attr-language"
-          >language</a
-        ></code
-      >
-      <svg class="icon icon-deprecated" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-deprecated"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >
-    </td>
-    <td>Defines the script language used in the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code>loading</code>
-      <svg class="icon icon-experimental" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-experimental"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates if the element should be loaded lazily
-      (<code>loading="lazy"</code>) or loaded immediately
-      (<code>loading="eager"</code>).
-      <div class="note notecard">
-        <strong>WIP:</strong>
-        <a
-          href="https://github.com/whatwg/html/pull/3752"
-          class="external"
-          rel=" noopener"
-          >WHATWG PR #3752</a
-        >
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/input#attr-list">list</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>Identifies a list of pre-defined options to suggest to the user.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/loop"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >loop</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/bgsound"
-        ><code>&lt;bgsound&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/marquee"
-        ><code>&lt;marquee&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates whether the media should start playing from the start when it's
-      finished.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Element/meter#attr-low">low</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/meter"
-        ><code>&lt;meter&gt;</code></a
-      >
-    </td>
-    <td>Indicates the upper bound of the lower range.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/html#attr-manifest"
-          >manifest</a
-        ></code
-      >
-      <svg class="icon icon-deprecated" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-deprecated"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/html"><code>&lt;html&gt;</code></a>
-    </td>
-    <td>
-      Specifies the URL of the document's cache manifest.
-      <div class="note notecard">
-        <strong>Note:</strong> This attribute is obsolete, use
-        <a href="/en-US/docs/Web/Manifest"
-          ><code>&lt;link rel="manifest"&gt;</code></a
-        >
-        instead.
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/meter"><code>&lt;meter&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/progress"
-        ><code>&lt;progress&gt;</code></a
-      >
-    </td>
-    <td>Indicates the maximum value allowed.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Defines the maximum number of characters allowed in the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Defines the minimum number of characters allowed in the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/media"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >media</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/source"
-        ><code>&lt;source&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/style"
-        ><code>&lt;style&gt;</code></a
-      >
-    </td>
-    <td>
-      Specifies a hint of the media for which the linked resource was designed.
-    </td>
-  </tr>
-  <tr>
-    <td><a href="/en-US/docs/Web/HTML/Element/form#attr-method">method</a></td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a>
-    </td>
-    <td>
-      Defines which <a href="/en-US/docs/Web/HTTP">HTTP</a> method to use when
-      submitting the form. Can be <code>GET</code> (default) or
-      <code>POST</code>.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/meter"
-        ><code>&lt;meter&gt;</code></a
-      >
-    </td>
-    <td>Indicates the minimum value allowed.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/multiple">multiple</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates whether multiple values can be entered in an input of the type
-      <code>email</code> or <code>file</code>.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/muted"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >muted</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates whether the audio will be initially silenced on page load.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/name"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >name</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/fieldset"
-        ><code>&lt;fieldset&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/keygen"
-        ><code>&lt;keygen&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/output"
-        ><code>&lt;output&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/map"><code>&lt;map&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/param"
-        ><code>&lt;param&gt;</code></a
-      >
-    </td>
-    <td>
-      Name of the element. For example used by the server to identify the fields
-      in form submits.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/form#attr-novalidate"
-          >novalidate</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a>
-    </td>
-    <td>
-      This attribute indicates that the form shouldn't be validated when
-      submitted.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/details#attr-open">open</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/details"
-        ><code>&lt;details&gt;</code></a
-      >
-    </td>
-    <td>Indicates whether the details will be shown on page load.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/meter#attr-optimum"
-          >optimum</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/meter"
-        ><code>&lt;meter&gt;</code></a
-      >
-    </td>
-    <td>Indicates the optimal numeric value.</td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td>
-      Defines a regular expression which the element's value will be validated
-      against.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Element/a#attr-ping">ping</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>
-    </td>
-    <td>
-      The <code>ping</code> attribute specifies a space-separated list of URLs
-      to be notified if a user follows the hyperlink.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/placeholder"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >placeholder</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Provides a hint to the user of what can be entered in the field.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/video#attr-poster"
-          >poster</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>
-      A URL indicating a poster frame to show until the user plays or seeks.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/preload"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >preload</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>
-      Indicates whether the whole resource, parts of it or nothing should be
-      preloaded.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Element/command#attr-radiogroup"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >radiogroup</a
-        ></code
-      >
-    </td>
-    <td>
-      <a
-        href="/en-US/docs/Web/HTML/Element/command"
-        class="page-not-created"
-        title="This is a link to an unwritten page"
-        ><code>&lt;command&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Indicates whether the element can be edited.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/referralpolicy"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >referrerpolicy</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >
-    </td>
-    <td>Specifies which referrer is sent when fetching the resource.</td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/rel">rel</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>
-    </td>
-    <td>Specifies the relationship of the target object to the link object.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Indicates whether this element is required to fill out or not.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/ol#attr-reversed"
-          >reversed</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a>
-    </td>
-    <td>
-      Indicates whether the list should be displayed in a descending order
-      instead of a ascending.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/textarea#attr-rows"
-          >rows</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Defines the number of rows in a text area.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/rowspan"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >rowspan</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>
-    </td>
-    <td>Defines the number of rows a table cell should span over.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/iframe#attr-sandbox"
-          >sandbox</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >
-    </td>
-    <td>
-      Stops a document loaded in an iframe from using certain features (such as
-      submitting forms or opening new windows).
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/th#attr-scope">scope</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>
-    </td>
-    <td>
-      Defines the cells that the header test (defined in the
-      <code>th</code> element) relates to.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/style#attr-scoped"
-          >scoped</a
-        ></code
-      >
-      <svg class="icon icon-nonstandard" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-nonstandard"></use>
-      </svg>
-      <svg class="icon icon-deprecated" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-deprecated"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/style"
-        ><code>&lt;style&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/option#attr-selected"
-          >selected</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/option"
-        ><code>&lt;option&gt;</code></a
-      >
-    </td>
-    <td>Defines a value which will be selected on page load.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/shape"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >shape</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/size">size</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/select"
-        ><code>&lt;select&gt;</code></a
-      >
-    </td>
-    <td>
-      Defines the width of the element (in pixels). If the element's
-      <code>type</code> attribute is <code>text</code> or
-      <code>password</code> then it's the number of characters.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/sizes"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >sizes</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/source"
-        ><code>&lt;source&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Assigns a slot in a shadow DOM shadow tree to an element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/span"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >span</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/colgroup"
-        ><code>&lt;colgroup&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck"
-          >spellcheck</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Indicates whether spell checking is allowed for the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/src"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >src</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/source"
-        ><code>&lt;source&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>The URL of the embeddable content.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/iframe#attr-srcdoc"
-          >srcdoc</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/track#attr-srclang"
-          >srclang</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/track"
-        ><code>&lt;track&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/srcset"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >srcset</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/source"
-        ><code>&lt;source&gt;</code></a
-      >
-    </td>
-    <td>One or more responsive image candidates.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/ol#attr-start">start</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a>
-    </td>
-    <td>Defines the first number if other than 1.</td>
-  </tr>
-  <tr>
-    <td>
-      <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/input"
-        ><code>&lt;input&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Defines CSS styles which will override styles previously set.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/table#attr-summary"
-          >summary</a
-        ></code
-      >
-      <svg class="icon icon-deprecated" tabindex="0">
-        <use xlink:href="/assets/badges.svg#icon-deprecated"></use>
-      </svg>
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/table"
-        ><code>&lt;table&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex"
-          >tabindex</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>
-      Overrides the browser's default tab order and follows the one specified
-      instead.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/target"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >target</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a>
-    </td>
-    <td>
-      Specifies where to open the linked document (in the case of an
-      <code>&lt;a&gt;</code> element) or where to display the response received
-      (in the case of a <code>&lt;form&gt;</code> element)
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>Text to be displayed in a tooltip when hovering over the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Global_attributes/translate"
-          >translate</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Global_attributes">Global attribute</a>
-    </td>
-    <td>
-      Specify whether an element’s attribute values and the values of its
-      <code
-        ><a
-          href="https://dom.spec.whatwg.org/#text"
-          id="ref-for-text①⑦"
-          class="external"
-          rel=" noopener"
-          >Text</a
-        ></code
-      >
-      node children are to be translated when the page is localized, or whether
-      to leave them unchanged.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/type"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >type</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a
-        href="/en-US/docs/Web/HTML/Element/command"
-        class="page-not-created"
-        title="This is a link to an unwritten page"
-        ><code>&lt;command&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/script"
-        ><code>&lt;script&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/source"
-        ><code>&lt;source&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/menu"><code>&lt;menu&gt;</code></a>
-    </td>
-    <td>Defines the type of the element.</td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/usemap"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >usemap</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >
-    </td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/value"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >value</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/button"
-        ><code>&lt;button&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/data"><code>&lt;data&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/meter"><code>&lt;meter&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/option"
-        ><code>&lt;option&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/progress"
-        ><code>&lt;progress&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/param"
-        ><code>&lt;param&gt;</code></a
-      >
-    </td>
-    <td>
-      Defines a default value which will be displayed in the element on page
-      load.
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a
-          href="/en-US/docs/Web/HTML/Attributes/width"
-          class="page-not-created"
-          title="This is a link to an unwritten page"
-          >width</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/canvas"
-        ><code>&lt;canvas&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/iframe"
-        ><code>&lt;iframe&gt;</code></a
-      >, <a href="/en-US/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/object"
-        ><code>&lt;object&gt;</code></a
-      >,
-      <a href="/en-US/docs/Web/HTML/Element/video"
-        ><code>&lt;video&gt;</code></a
-      >
-    </td>
-    <td>
-      <p>For the elements listed here, this establishes the element's width.</p>
-
-      <div class="note notecard">
-        <p>
-          <strong>Note:</strong> For all other instances, such as
-          <a href="/en-US/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a
-          >, this is a legacy attribute, in which case the CSS
-          <a href="/en-US/docs/Web/CSS/width"><code>width</code></a> property
-          should be used instead.
-        </p>
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <code
-        ><a href="/en-US/docs/Web/HTML/Element/textarea#attr-wrap"
-          >wrap</a
-        ></code
-      >
-    </td>
-    <td>
-      <a href="/en-US/docs/Web/HTML/Element/textarea"
-        ><code>&lt;textarea&gt;</code></a
-      >
-    </td>
-    <td>Indicates whether the text should be wrapped.</td>
-  </tr>
-</tbody>

packages/html-namespace/examples/namespace.rs

@@ -1,42 +0,0 @@
-use scraper::{Html, Selector};
-
-struct AttrClass {
-    attr_name: String,
-    attr_doc_link: String,
-    target_elements: Vec<String>,
-    docs: String,
-}
-
-const contents: &str = "";
-// let contents = include_str!("./attrlist.html");
-fn main() {
-    let mut items: Vec<AttrClass> = Vec::new();
-
-    let fragment = Html::parse_fragment(contents);
-
-    let ul_selector = Selector::parse("tbody").unwrap();
-    let li_selector = Selector::parse("tr").unwrap();
-
-    let ul = fragment.select(&ul_selector).next().unwrap();
-    for element in ul.select(&li_selector) {
-        let mut childs = element.children().into_iter();
-
-        let attr_field_node = childs.next().unwrap();
-        let elements_node = childs.next().unwrap();
-        let description_node = childs.next().unwrap();
-
-        // let attr_name = { todo!() };
-        // let attr_doc_link = { todo!() };
-        // let target_elements = { todo!() };
-
-        // let docs = description_node.text();
-
-        // todo!()
-        // items.push(AttrClass {
-        //     attr_name,
-        //     attr_doc_link,
-        //     target_elements,
-        //     docs,
-        // })
-    }
-}

packages/html-namespace/examples/poc.rs

@@ -1,30 +0,0 @@
-//! POC: Planning the layout of a single element type
-//!
-//!
-//! The ultimate goal with a dedicated namespace is three-fold:
-//! - compile-time correct templates preventing misuse of elemnents
-//! - deep integration of DSL with IDE
-//!
-//!
-//!
-
-struct NodeFactory {}
-
-struct div<'a>(&NodeFactory);
-impl<'a> div<'a> {
-    fn new(cx: &NodeFactory) -> Self {
-        div(cx)
-    }
-}
-
-fn main() {}
-
-fn factory(
-    // this is your mom
-    cx: &NodeFactory,
-) {
-    div::new(cx);
-    rsx! {
-        div {}
-    }
-}

packages/html-namespace/src/lib.rs

@@ -1,37 +1,22 @@
-trait DioxusElement {
-    const TAG_NAME: &'static str;
-    const NAME_SPACE: Option<&'static str>;
-}
-
-struct myinput {}
+//! # Dioxus Namespace for HTML
+//!
+//! This crate provides a set of compile-time correct HTML elements that can be used with the Rsx and Html macros.
+//! This system allows users to easily build new tags, new types, and customize the output of the Rsx and Html macros.
+//!
+//! An added benefit of this approach is the ability to lend comprehensive documentation on how to use these elements inside
+//! of the Rsx and Html macros. Each element comes with a substantial amount of documentation on how to best use it, hopefully
+//! making the development cycle quick.
 
-struct NodeBuilder {}
-impl NodeBuilder {
-    // fn add_attr()
-}
+use dioxus_core::prelude::{DioxusElement, NodeFactory};
 
 macro_rules! builder_constructors {
-    ( $(
-        $(#[$attr:meta])*
-        $name:ident;
-        // {
-            // attrs: [
-            //     $(
-            //         $(#[$attr2:meta])*
-            //         $attr3:ident
-            //         ,
-            //     )*
-            // ];
-        // }
-    )* ) => {
+    ( $( $(#[$attr:meta])* $name:ident; )* ) => {
         $(
             #[allow(non_camel_case_types)]
             $(#[$attr])*
-            pub struct $name<'a> {
-                // the we wrap the builder, shielding what can be added
-                builder: &'a NodeBuilder
-            }
-            impl<'a> DioxusElement for $name<'a> {
+            pub struct $name;
+
+            impl DioxusElement for $name {
                 const TAG_NAME: &'static str = stringify!($name);
                 const NAME_SPACE: Option<&'static str> = None;
             }
@@ -48,6 +33,10 @@ macro_rules! builder_constructors {
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 //
 // Does not include obsolete elements.
+
+// This namespace represents a collection of modern HTML-5 compatiable elements.
+//
+// This list does not include obsolete, deprecated, experimental, or poorly supported elements.
 builder_constructors! {
     // Document metadata
 
@@ -109,18 +98,57 @@ builder_constructors! {
     /// element.
     header;
 
+
     /// Build a
     /// [`<h1>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1)
     /// element.
+    ///
+    /// # About
+    /// - The HTML `<h1>` element is found within the `<body>` tag.
+    /// - Headings can range from `<h1>` to `<h6>`.
+    /// - The most important heading is `<h1>` and the least important heading is `<h6>`.
+    /// - The `<h1>` heading is the first heading in the document.
+    /// - The `<h1>` heading is usually a large bolded font.
+    ///
+    /// # Usage
+    /// ```
+    /// html!(<h1> A header element </h1>)
+    /// rsx!(h1 { "A header element" })
+    /// LazyNodes::new(|f| f.el(h1).children([f.text("A header element")]).finish())
+    /// ```
     h1;
 
+
     /// Build a
     /// [`<h2>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2)
     /// element.
+    ///
+    /// # About
+    /// - The HTML `<h2>` element is found within the `<body>` tag.
+    /// - Headings can range from `<h1>` to `<h6>`.
+    /// - The most important heading is `<h1>` and the least important heading is `<h6>`.
+    /// - The `<h2>` heading is the second heading in the document.
+    /// - The `<h2>` heading is usually a large bolded font.
+    ///
+    /// # Usage
+    /// ```
+    /// html!(<h2> A header element </h2>)
+    /// rsx!(h2 { "A header element" })
+    /// LazyNodes::new(|f| f.el(h2).children([f.text("A header element")]).finish())
+    /// ```
     h2;
+
+
     /// Build a
     /// [`<h3>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3)
     /// element.
+    ///
+    /// # About
+    /// - The HTML <h1> element is found within the <body> tag.
+    /// - Headings can range from <h1> to <h6>.
+    /// - The most important heading is <h1> and the least important heading is <h6>.
+    /// - The <h1> heading is the first heading in the document.
+    /// - The <h1> heading is usually a large bolded font.
     h3;
     /// Build a
     /// [`<h4>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4)
@@ -134,10 +162,7 @@ builder_constructors! {
     /// [`<h6>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6)
     /// element.
     h6;
-    /// Build a
-    /// [`<hgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup)
-    /// element.
-    hgroup;
+
     /// Build a
     /// [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
     /// element.
@@ -268,22 +293,17 @@ builder_constructors! {
     /// [`<q>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
     /// element.
     q;
-    /// Build a
-    /// [`<rb>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb)
-    /// element.
-    rb;
+
     /// Build a
     /// [`<rp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp)
     /// element.
     rp;
+
     /// Build a
     /// [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt)
     /// element.
     rt;
-    /// Build a
-    /// [`<rtc>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc)
-    /// element.
-    rtc;
+
     /// Build a
     /// [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
     /// element.
@@ -521,18 +541,8 @@ builder_constructors! {
     /// [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
     /// element.
     details;
-    /// Build a
-    /// [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
-    /// element.
-    dialog;
-    /// Build a
-    /// [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)
-    /// element.
-    menu;
-    /// Build a
-    /// [`<menuitem>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem)
-    /// element.
-    menuitem;
+
+
     /// Build a
     /// [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
     /// element.
@@ -552,7 +562,6 @@ builder_constructors! {
 
 builder_constructors! {
     // SVG components
-
     /// Build a
     /// [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)
     /// element.
@@ -590,38 +599,3 @@ builder_constructors! {
     /// element.
     image <> "http://www.w3.org/2000/svg";
 }
-
-macro_rules! impl_attrs {
-    ( $(
-        $(#[$attr:meta])*
-        $name:ident: [$($f:ident)*];
-    )* ) => {};
-}
-
-impl_attrs! {
-    /// Indicates whether the user can interact with the element
-    disabled: [button command fieldset input keygen optgroup option select textarea];
-
-}
-
-mod tests {
-    use super::*;
-    fn r#type() {}
-
-    struct MyThing {}
-    impl MyThing {
-        /// eat my socks
-        fn r#type(&self) -> &Self {
-            self
-        }
-        fn nothing(&self) -> &Self {
-            self
-        }
-    }
-    fn test() {
-        let t = MyThing {};
-        t.r#type().r#nothing();
-
-        // let g = div::TAG_NAME;
-    }
-}

packages/webview/src/dom.rs

@@ -11,16 +11,6 @@ use dioxus_core::{
 use serde::{Deserialize, Serialize};
 use DomEdits::*;
 
-fn test() {
-    const App: FC<()> = |cx| cx.render(rsx! { div {}});
-    let mut vi = VirtualDom::new(App);
-    let mut real = WebviewDom {
-        edits: Vec::new(),
-        node_counter: 0,
-    };
-    vi.rebuild(&mut real);
-}
-
 pub struct WebviewDom<'bump> {
     pub edits: Vec<DomEdits<'bump>>,
     pub node_counter: u64,