try css stuff

src/components/code-block.js

@@ -1,20 +1,39 @@
+// @ts-check
+
 class CodeBlockComponent extends HTMLElement {
   constructor() {
     super();
   }
 
   connectedCallback() {
-    let lang = this.classList.value;
-    lang = lang.replace("language-", "");
-
     const trimmed = this.innerHTML.trim();
 
+    this.css({
+      color: "orange",
+      margin: "1em 0",
+      padding: "1em",
+      fontWeight: "bold",
+      fontSize: "x-large",
+      display: "block",
+      backgroundColor: "#eee",
+    });
+
     const template = `
       <div>
-        <pre class="${this.classList}" id="pre"><code id="code">${trimmed}</code></pre>
+        <pre class="language-${this.lang}" id="pre"><code id="code">${trimmed}</code></pre>
       </div>
     `;
 
     this.innerHTML = template;
   }
+
+  /**
+   * Apply css to an element
+   * @param {Partial<CSSStyleDeclaration>} style
+   * @param {HTMLElement} element
+   */
+  css(style, element = null) {
+    let el = element ?? this;
+    for (const property in style) el.style[property] = style[property];
+  }
 }

src/pages/demo/index.html

@@ -25,8 +25,10 @@
       <p>some text: {{greeting}}</p>
       {{greeting}} hey<br />
       <clickable-text></clickable-text>
+      <code-block lang="css"> const hey = "AYO" </code-block>
     </main>
     <my-footer></my-footer>
+
     <script>
       const helloWorld = document.querySelector("my-hello-world");
       setTimeout(() => {