diff --git a/render/src/fragment.rs b/render/src/fragment.rs
index 6b653aa..27797b0 100644
--- a/render/src/fragment.rs
+++ b/render/src/fragment.rs
@@ -17,7 +17,7 @@ use std::fmt::{Result, Write};
 /// };
 /// assert_eq!(result, "<a/><b/>");
 /// ```
-#[derive(Debug)]
+#[derive(Debug, Clone)]
 pub struct Fragment<T: Render> {
     pub children: T,
 }
diff --git a/render/src/render.rs b/render/src/render.rs
index ae9a880..642e2ec 100644
--- a/render/src/render.rs
+++ b/render/src/render.rs
@@ -3,13 +3,16 @@ use std::fmt::{Result, Write};
 /// Render a component
 ///
 /// This is the underlying mechanism of the `#[component]` macro
-pub trait Render: Sized {
+pub trait Render {
     /// Render the component to a writer.
     /// Make sure you escape html correctly using the `render::html_escaping` module
     fn render_into<W: Write>(self, writer: &mut W) -> Result;
 
     /// Render the component to string
-    fn render(self) -> String {
+    fn render(self) -> String
+    where
+        Self: Sized,
+    {
         let mut buf = String::new();
         self.render_into(&mut buf).unwrap();
         buf
diff --git a/render/src/simple_element.rs b/render/src/simple_element.rs
index 4cc0e22..18ddbd7 100644
--- a/render/src/simple_element.rs
+++ b/render/src/simple_element.rs
@@ -7,7 +7,7 @@ use std::fmt::{Result, Write};
 type Attributes<'a> = Option<HashMap<&'a str, Cow<'a, str>>>;
 
 /// Simple HTML element tag
-#[derive(Debug)]
+#[derive(Debug, Clone)]
 pub struct SimpleElement<'a, T: Render> {
     /// the HTML tag name, like `html`, `head`, `body`, `link`...
     pub tag_name: &'a str,
@@ -20,9 +20,16 @@ fn write_attributes<'a, W: Write>(maybe_attributes: Attributes<'a>, writer: &mut
         None => Ok(()),
         Some(mut attributes) => {
             for (key, value) in attributes.drain() {
-                write!(writer, " {}=\"", key)?;
-                escape_html(&value, writer)?;
-                write!(writer, "\"")?;
+                if key.chars().nth(0).unwrap_or('.') == 'b' && key.chars().nth(1).unwrap_or('.') == '!' {
+                    if(value == "true") {
+                        write!(writer, " {}", key.replace("b!", ""))?; 
+                    }
+                }
+                else {
+                    write!(writer, " {}=\"", key)?;
+                    write!(writer, "{}", value)?;
+                    write!(writer, "\"")?;
+                }
             }
             Ok(())
         }
diff --git a/render/src/text_element.rs b/render/src/text_element.rs
index 7ce591c..d49a74a 100644
--- a/render/src/text_element.rs
+++ b/render/src/text_element.rs
@@ -22,16 +22,23 @@ impl Render for std::borrow::Cow<'_, str> {
 
 /// A raw (unencoded) html string
 #[derive(Debug)]
-pub struct Raw<'s>(&'s str);
+pub struct Raw(String);
 
-impl<'s> From<&'s str> for Raw<'s> {
-    fn from(s: &'s str) -> Self {
+impl From<&str> for Raw {
+    fn from(s: &str) -> Self {
+        Raw(s.to_string())
+    }
+}
+
+
+impl From<String> for Raw {
+    fn from(s: String) -> Self {
         Raw(s)
     }
 }
 
 /// A raw (unencoded) html string
-impl<'s> Render for Raw<'s> {
+impl Render for Raw {
     fn render_into<W: Write>(self, writer: &mut W) -> Result {
         write!(writer, "{}", self.0)
     }
diff --git a/render_macros/src/child.rs b/render_macros/src/child.rs
index 63ec9dd..3519f03 100644
--- a/render_macros/src/child.rs
+++ b/render_macros/src/child.rs
@@ -2,6 +2,7 @@ use crate::element::Element;
 use quote::{quote, ToTokens};
 use syn::parse::{Parse, ParseStream, Result};
 
+#[derive(Clone)]
 pub enum Child {
     Element(Element),
     RawBlock(syn::Block),
diff --git a/render_macros/src/children.rs b/render_macros/src/children.rs
index 2b33d5a..3536798 100644
--- a/render_macros/src/children.rs
+++ b/render_macros/src/children.rs
@@ -2,7 +2,7 @@ use crate::child::Child;
 use quote::{quote, ToTokens};
 use syn::parse::{Parse, ParseStream, Result};
 
-#[derive(Default)]
+#[derive(Default, Clone)]
 pub struct Children {
     pub nodes: Vec<Child>,
 }
@@ -30,7 +30,6 @@ impl Children {
             1 => quote! { Some(#(#children_quotes),*) },
             _ => {
                 let mut iter = children_quotes.iter();
-
                 let first = iter.next().unwrap();
                 let second = iter.next().unwrap();
 
diff --git a/render_macros/src/element.rs b/render_macros/src/element.rs
index 161919b..46304fd 100644
--- a/render_macros/src/element.rs
+++ b/render_macros/src/element.rs
@@ -4,6 +4,7 @@ use crate::tags::{ClosingTag, OpenTag};
 use quote::{quote, ToTokens};
 use syn::parse::{Parse, ParseStream, Result};
 
+#[derive(Clone)]
 pub struct Element {
     name: syn::Path,
     attributes: ElementAttributes,
diff --git a/render_macros/src/element_attribute.rs b/render_macros/src/element_attribute.rs
index abf38ad..a7b495c 100644
--- a/render_macros/src/element_attribute.rs
+++ b/render_macros/src/element_attribute.rs
@@ -4,8 +4,9 @@ use syn::ext::IdentExt;
 use syn::parse::{Parse, ParseStream, Result};
 use syn::spanned::Spanned;
 
-pub type AttributeKey = syn::punctuated::Punctuated<syn::Ident, syn::Token![-]>;
+pub type AttributeKey = syn::punctuated::Punctuated<proc_macro2::Ident, proc_macro2::Punct>;
 
+#[derive(Clone)]
 pub enum ElementAttribute {
     Punned(AttributeKey),
     WithValue(AttributeKey, syn::Block),
@@ -94,14 +95,41 @@ impl Hash for ElementAttribute {
 
 impl Parse for ElementAttribute {
     fn parse(input: ParseStream) -> Result<Self> {
-        let name = AttributeKey::parse_separated_nonempty_with(input, syn::Ident::parse_any)?;
-        let not_punned = input.peek(syn::Token![=]);
+        let mut name: syn::punctuated::Punctuated<proc_macro2::Ident, proc_macro2::Punct> =
+            syn::punctuated::Punctuated::new();
+
+        // Parse the input up to the space
+        loop {
+            let value = syn::Ident::parse_any(&input).unwrap();
+            name.push_value(value);
+
+            if input.peek(syn::Token![=]) {
+                break;
+            }
+
+            let punct = input.parse().unwrap();
+            name.push_punct(punct);
+        }
+
+        // Peak for incoming equals to check if its punned
+        let mut not_punned = input.peek(syn::Token![=]);
+
+        if !not_punned {
+            not_punned = input.peek2(syn::Token![=]);
+        }
+
+        if !not_punned {
+            not_punned = input.peek3(syn::Token![=]);
+        }
 
         if !not_punned {
             return Ok(Self::Punned(name));
         }
 
+        // Parse equals
         input.parse::<syn::Token![=]>()?;
+
+        // Parse body
         let value = input.parse::<syn::Block>()?;
 
         Ok(Self::WithValue(name, value))
diff --git a/render_macros/src/element_attributes.rs b/render_macros/src/element_attributes.rs
index ace3fb0..5c6ecf0 100644
--- a/render_macros/src/element_attributes.rs
+++ b/render_macros/src/element_attributes.rs
@@ -9,7 +9,7 @@ use syn::spanned::Spanned;
 
 pub type Attributes = HashSet<ElementAttribute>;
 
-#[derive(Default)]
+#[derive(Default, Clone)]
 pub struct ElementAttributes {
     pub attributes: Attributes,
 }
@@ -123,10 +123,17 @@ impl<'a> ToTokens for SimpleElementAttributes<'a> {
                 .attributes
                 .iter()
                 .map(|attribute| {
-                    let mut iter = attribute.ident().iter();
-                    let first_word = iter.next().unwrap().unraw();
-                    let ident = iter.fold(first_word.to_string(), |acc, curr| {
-                        format!("{}-{}", acc, curr.unraw())
+                    let mut iter = attribute.ident().pairs();
+                    let ident = iter.fold("".to_string(), |acc, curr| {
+                        format!(
+                            "{}{}{}",
+                            acc,
+                            curr.value(),
+                            match curr.punct() {
+                                Some(p) => p.as_char().to_string(),
+                                None => "".to_string(),
+                            }
+                        )
                     });
                     let value = attribute.value_tokens();
 
diff --git a/render_macros/src/function_component.rs b/render_macros/src/function_component.rs
index 884aad0..a4816b1 100644
--- a/render_macros/src/function_component.rs
+++ b/render_macros/src/function_component.rs
@@ -41,7 +41,7 @@ pub fn create_function_component(f: syn::ItemFn) -> TokenStream {
     };
 
     TokenStream::from(quote! {
-        #[derive(Debug)]
+        #[derive(Debug, Clone)]
         #vis struct #struct_name#impl_generics #inputs_block
 
         impl#impl_generics ::render::Render for #struct_name #ty_generics #where_clause {
diff --git a/render_tests/src/lib.rs b/render_tests/src/lib.rs
index 873e576..5529857 100644
--- a/render_tests/src/lib.rs
+++ b/render_tests/src/lib.rs
@@ -1,247 +1,267 @@
 #[test]
 fn ui() {
-    let t = trybuild::TestCases::new();
-    t.compile_fail("ui/fail/*.rs");
+  let t = trybuild::TestCases::new();
+  t.compile_fail("ui/fail/*.rs");
 }
 
 #[test]
 fn works_with_dashes() {
-    use pretty_assertions::assert_eq;
+  use pretty_assertions::assert_eq;
 
-    let value = render::html! { <div data-id={"myid"} /> };
-    assert_eq!(value, r#"<div data-id="myid"/>"#);
+  let value = render::html! { <div data-id={"myid"} /> };
+  assert_eq!(value, r#"<div data-id="myid"/>"#);
 }
 
 #[test]
 fn works_with_raw() {
-    use pretty_assertions::assert_eq;
-    use render::{html, raw};
+  use pretty_assertions::assert_eq;
+  use render::{html, raw};
 
-    let actual = html! {
-        <div>{raw!("<Hello />")}</div>
-    };
+  let actual = html! {
+      <div>{raw!("<Hello />")}</div>
+  };
 
-    assert_eq!(actual, "<div><Hello /></div>");
+  assert_eq!(actual, "<div><Hello /></div>");
 }
 
 #[test]
 fn works_with_raw_ident() {
-    use pretty_assertions::assert_eq;
+  use pretty_assertions::assert_eq;
 
-    let actual = render::html! {
-        <input r#type={"text"} />
-    };
+  let actual = render::html! {
+      <input r#type={"text"} />
+  };
 
-    assert_eq!(actual, r#"<input type="text"/>"#);
+  assert_eq!(actual, r#"<input type="text"/>"#);
 }
 
 #[test]
 fn works_with_keywords() {
-    use pretty_assertions::assert_eq;
-    use render::html;
+  use pretty_assertions::assert_eq;
+  use render::html;
 
-    assert_eq!(html! { <input type={"text"} /> }, r#"<input type="text"/>"#);
-    assert_eq!(html! { <label for={"me"} /> }, r#"<label for="me"/>"#);
+  assert_eq!(html! { <input type={"text"} /> }, r#"<input type="text"/>"#);
+  assert_eq!(html! { <label for={"me"} /> }, r#"<label for="me"/>"#);
 }
 
+/// ### Weird Attributes
+///
+/// This test checks various weird attributes like those that are prefixed with
+/// strange characters often used by js libs for functional macros.
+
 #[test]
-fn element_ordering() {
-    use pretty_assertions::assert_eq;
-    use render::html;
+fn weird_attributes() {
+  use pretty_assertions::assert_eq;
+  use render::html;
+
+  assert_eq!(
+    html! { <input x-on@click={"foo"} /> },
+    r#"<input x-on@click="foo"/>"#
+  );
+  assert_eq!(
+    html! { <input x-bind:class={"{ 'active': tab === 'foo' }"} /> },
+    r#"<input x-bind:class="{ 'active': tab === 'foo' }"/>"#
+  );
+}
 
-    let actual = html! {
+#[test]
+fn element_ordering() {
+  use pretty_assertions::assert_eq;
+  use render::html;
+
+  let actual = html! {
+    <ul>
+      <li>{"1"}</li>
+      <li>{"2"}</li>
+      <li>{"3"}</li>
+    </ul>
+  };
+
+  assert_eq!(actual, "<ul><li>1</li><li>2</li><li>3</li></ul>");
+
+  let deep = html! {
+    <div>
+      <h1>{"A list"}</h1>
+      <hr />
       <ul>
         <li>{"1"}</li>
         <li>{"2"}</li>
         <li>{"3"}</li>
       </ul>
-    };
-
-    assert_eq!(actual, "<ul><li>1</li><li>2</li><li>3</li></ul>");
+    </div>
+  };
 
-    let deep = html! {
-      <div>
-        <h1>{"A list"}</h1>
-        <hr />
-        <ul>
-          <li>{"1"}</li>
-          <li>{"2"}</li>
-          <li>{"3"}</li>
-        </ul>
-      </div>
-    };
-
-    assert_eq!(
-        deep,
-        "<div><h1>A list</h1><hr/><ul><li>1</li><li>2</li><li>3</li></ul></div>"
-    );
+  assert_eq!(
+    deep,
+    "<div><h1>A list</h1><hr/><ul><li>1</li><li>2</li><li>3</li></ul></div>"
+  );
 }
 
 #[test]
 fn some_none() {
-    use pretty_assertions::assert_eq;
-    use render::{component, html, rsx};
-
-    #[component]
-    fn Answer(a: i8) {
-        rsx! {
-          <>
-            {match a {
-              42 => Some("Yes"),
-              _ => None,
-            }}
-          </>
-        }
+  use pretty_assertions::assert_eq;
+  use render::{component, html, rsx};
+
+  #[component]
+  fn Answer(a: i8) {
+    rsx! {
+      <>
+        {match a {
+          42 => Some("Yes"),
+          _ => None,
+        }}
+      </>
     }
+  }
 
-    assert_eq!(html! { <Answer a={42} /> }, "Yes");
-    assert_eq!(html! { <Answer a={44} /> }, "");
+  assert_eq!(html! { <Answer a={42} /> }, "Yes");
+  assert_eq!(html! { <Answer a={44} /> }, "");
 }
 
 #[test]
 fn owned_string() {
-    use pretty_assertions::assert_eq;
-    use render::{component, html, rsx};
-
-    #[component]
-    fn Welcome<'kind, 'name>(kind: &'kind str, name: &'name str) {
-        rsx! {
-            <h1 class={format!("{}-title", kind)}>
-                {format!("Hello, {}", name)}
-            </h1>
-        }
+  use pretty_assertions::assert_eq;
+  use render::{component, html, rsx};
+
+  #[component]
+  fn Welcome<'kind, 'name>(kind: &'kind str, name: &'name str) {
+    rsx! {
+        <h1 class={format!("{}-title", kind)}>
+            {format!("Hello, {}", name)}
+        </h1>
     }
+  }
 
-    assert_eq!(
-        html! { <Welcome kind={"alien"} name={"Yoda"} /> },
-        r#"<h1 class="alien-title">Hello, Yoda</h1>"#
-    );
+  assert_eq!(
+    html! { <Welcome kind={"alien"} name={"Yoda"} /> },
+    r#"<h1 class="alien-title">Hello, Yoda</h1>"#
+  );
 }
 
 #[test]
 fn cow_str() {
-    use pretty_assertions::assert_eq;
-    use render::html;
-    use std::borrow::Cow;
-
-    let owned1 = "Borrowed from owned".to_owned();
-    let owned2 = "Owned".to_owned();
-
-    assert_eq!(
-        html! {
-            <div>
-                <p>{Cow::Borrowed("Static")}</p>
-                <p>{Cow::<'_, str>::Borrowed(&owned1)}</p>
-                <p>{Cow::<'_, str>::Owned(owned2)}</p>
-            </div>
-        },
-        r#"<div><p>Static</p><p>Borrowed from owned</p><p>Owned</p></div>"#,
-    );
+  use pretty_assertions::assert_eq;
+  use render::html;
+  use std::borrow::Cow;
+
+  let owned1 = "Borrowed from owned".to_owned();
+  let owned2 = "Owned".to_owned();
+
+  assert_eq!(
+    html! {
+        <div>
+            <p>{Cow::Borrowed("Static")}</p>
+            <p>{Cow::<'_, str>::Borrowed(&owned1)}</p>
+            <p>{Cow::<'_, str>::Owned(owned2)}</p>
+        </div>
+    },
+    r#"<div><p>Static</p><p>Borrowed from owned</p><p>Owned</p></div>"#,
+  );
 }
 
 #[test]
 fn number() {
-    use pretty_assertions::assert_eq;
-    use render::html;
+  use pretty_assertions::assert_eq;
+  use render::html;
 
-    let num = 42;
+  let num = 42;
 
-    assert_eq!(html! { <p>{num}</p> }, "<p>42</p>")
+  assert_eq!(html! { <p>{num}</p> }, "<p>42</p>")
 }
 
 #[test]
 fn vec() {
-    use pretty_assertions::assert_eq;
-    use render::html;
-
-    let list = vec!["Mouse", "Rat", "Hamster"];
-
-    assert_eq!(
-        html! {
-            <ul>
-                {
-                    list
-                        .into_iter()
-                        .map(|text| render::rsx! { <li>{text}</li> })
-                        .collect::<Vec<_>>()
-                }
-            </ul>
-        },
-        "<ul><li>Mouse</li><li>Rat</li><li>Hamster</li></ul>"
-    )
+  use pretty_assertions::assert_eq;
+  use render::html;
+
+  let list = vec!["Mouse", "Rat", "Hamster"];
+
+  assert_eq!(
+    html! {
+        <ul>
+            {
+                list
+                    .into_iter()
+                    .map(|text| render::rsx! { <li>{text}</li> })
+                    .collect::<Vec<_>>()
+            }
+        </ul>
+    },
+    "<ul><li>Mouse</li><li>Rat</li><li>Hamster</li></ul>"
+  )
 }
 
 mod kaki {
-    // A simple HTML 5 doctype declaration
-    use render::html::HTML5Doctype;
-    use render::{
-        // A macro to create components
-        component,
-        // A macro to compose components in JSX fashion
-        rsx,
-        // A trait for custom components
-        Render,
+  // A simple HTML 5 doctype declaration
+  use render::html::HTML5Doctype;
+  use render::{
+    // A macro to create components
+    component,
+    // A macro to compose components in JSX fashion
+    rsx,
+    // A trait for custom components
+    Render,
+  };
+
+  // This can be any layout we want
+  #[component]
+  fn Page<'a, Children: Render>(title: &'a str, children: Children) {
+    rsx! {
+      <>
+        <HTML5Doctype />
+        <html>
+          <head><title>{title}</title></head>
+          <body>
+            {children}
+          </body>
+        </html>
+      </>
+    }
+  }
+
+  #[test]
+  fn test() {
+    use pretty_assertions::assert_eq;
+    let actual = render::html! {
+      <Page title={"Home"}>
+        {format!("Welcome, {}", "Gal")}
+      </Page>
     };
+    let expected = concat!(
+      "<!DOCTYPE html>",
+      "<html>",
+      "<head><title>Home</title></head>",
+      "<body>",
+      "Welcome, Gal",
+      "</body>",
+      "</html>"
+    );
+    assert_eq!(actual, expected);
+  }
 
-    // This can be any layout we want
-    #[component]
-    fn Page<'a, Children: Render>(title: &'a str, children: Children) {
-        rsx! {
-          <>
-            <HTML5Doctype />
-            <html>
-              <head><title>{title}</title></head>
-              <body>
-                {children}
-              </body>
-            </html>
-          </>
-        }
-    }
+  #[test]
+  fn externals_test() {
+    use crate::other::ExternalPage;
+    use pretty_assertions::assert_eq;
 
-    #[test]
-    fn test() {
-        use pretty_assertions::assert_eq;
-        let actual = render::html! {
-          <Page title={"Home"}>
-            {format!("Welcome, {}", "Gal")}
-          </Page>
-        };
-        let expected = concat!(
-            "<!DOCTYPE html>",
-            "<html>",
-            "<head><title>Home</title></head>",
-            "<body>",
-            "Welcome, Gal",
-            "</body>",
-            "</html>"
-        );
-        assert_eq!(actual, expected);
-    }
+    let actual = render::html! {
+      <ExternalPage title={"Home"} subtitle={"Foo"}>
+        {format!("Welcome, {}", "Gal")}
+      </ExternalPage>
+    };
 
-    #[test]
-    fn externals_test() {
-        use crate::other::ExternalPage;
-        use pretty_assertions::assert_eq;
-
-        let actual = render::html! {
-          <ExternalPage title={"Home"} subtitle={"Foo"}>
-            {format!("Welcome, {}", "Gal")}
-          </ExternalPage>
-        };
-
-        let expected = concat!(
-            "<!DOCTYPE html>",
-            "<html>",
-            "<head><title>Home</title></head>",
-            "<body>",
-            "<h1>Foo</h1>",
-            "Welcome, Gal",
-            "</body>",
-            "</html>"
-        );
-        assert_eq!(actual, expected);
-    }
+    let expected = concat!(
+      "<!DOCTYPE html>",
+      "<html>",
+      "<head><title>Home</title></head>",
+      "<body>",
+      "<h1>Foo</h1>",
+      "Welcome, Gal",
+      "</body>",
+      "</html>"
+    );
+    assert_eq!(actual, expected);
+  }
 }
 
 /// ## Other
@@ -249,26 +269,26 @@ mod kaki {
 /// Module for testing component visibility when imported from other modules.
 
 mod other {
-    use render::html::HTML5Doctype;
-    use render::{component, rsx, Render};
-
-    #[component]
-    pub fn ExternalPage<'title, 'subtitle, Children: Render>(
-        title: &'title str,
-        subtitle: &'subtitle str,
-        children: Children,
-    ) {
-        rsx! {
-            <>
-              <HTML5Doctype />
-              <html>
-                <head><title>{title}</title></head>
-                <body>
-                  <h1>{subtitle}</h1>
-                  {children}
-                </body>
-              </html>
-            </>
-        }
+  use render::html::HTML5Doctype;
+  use render::{component, rsx, Render};
+
+  #[component]
+  pub fn ExternalPage<'title, 'subtitle, Children: Render>(
+    title: &'title str,
+    subtitle: &'subtitle str,
+    children: Children,
+  ) {
+    rsx! {
+        <>
+          <HTML5Doctype />
+          <html>
+            <head><title>{title}</title></head>
+            <body>
+              <h1>{subtitle}</h1>
+              {children}
+            </body>
+          </html>
+        </>
     }
+  }
 }