add showlace extra style dynamically

pyscript.core/src/stdlib/pyweb/ui/elements.py

@@ -110,6 +110,28 @@ class link(TextElementBase):
         )
 
 
+class style(TextElementBase):
+    tag = "style"
+
+    blocking = js_property("blocking")
+    title = js_property("title")
+    nonce = js_property("nonce")
+    media = js_property("media")
+
+    def __init__(
+        self,
+        content=None,
+        blocking=None,
+        title=None,
+        nonce=None,
+        media=None,
+        style=None,
+        **kwargs
+    ):
+        super().__init__(content=content, blocking=blocking, title=title,
+            nonce=nonce, media=media, style=style, **kwargs
+        )
+
 class script(TextElementBase):
     tag = "script"
 

pyscript.core/src/stdlib/pyweb/ui/shoelace.py

@@ -375,8 +375,21 @@ class Icon(ShoeBase):
 
 
 # Load resources...
-# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />
-# <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js"></script>
+CSS = """
+.card-overview {
+    max-width: 300px;
+}
+
+.card-overview small {
+    color: var(--sl-color-neutral-500);
+}
+
+.card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+"""
 def load_resources(parent=None):
     print("Loading shoelace resources...")
     if parent is None:
@@ -393,4 +406,5 @@ def load_resources(parent=None):
             type="module",
         ),
     )
+    parent.append(el.style(CSS))
     print("Resources loaded!")