Update examples, add css

examples/web_component.rs

@@ -1,3 +1,9 @@
+//! Dioxus allows webcomponents to be created with a simple syntax.
+//!
+//! Read more about webcomponents [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+//!
+//! We typically suggest wrapping webcomponents in a strongly typed interface using a component.
+
 use dioxus::prelude::*;
 
 fn main() {
@@ -6,8 +12,21 @@ fn main() {
 
 fn app() -> Element {
     rsx! {
+        div {
+            h1 { "Web Components" }
+            CoolWebComponet { my_prop: "Hello, world!".to_string() }
+        }
+    }
+}
+
+/// A web-component wrapped with a strongly typed interface using a component
+#[component]
+fn CoolWebComponet(my_prop: String) -> Element {
+    rsx! {
+        // rsx! takes a webcomponent as long as its tag name is separated with dashes
         web-component {
-            "my-prop": "5%",
+            // Since web-components don't have built-in attributes, the attribute names must be passed as a string
+            "my-prop": my_prop,
         }
     }
 }