Declarative Shadow DOM

Tuesday, 24 December 2024

The web platform continues to grow, and features continue to land as baseline. One that I have been anticipating being widely supported across the latest browsers has been declarative shadow DOM. In essence, it enables Web Components to be server-side rendered and shown on the client without JavaScript. Check out the example below, where shadow DOM is used both declaratively with HTML and imperatively with JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Declarative Shadow DOM</title>
  </head>
  <body>
    <style>
      p {
        color: blue;
        border: dashed 0.0625rem red;
        padding: 1rem;
      }
    </style>
    <x-element>
      <template shadowrootmode="open">
        <style>
          h1 {
            color: red;
            border: dotted 0.0625rem blue;
            padding: 1rem;
          }
        </style>
        <h1>Welcome to x-element!</h1>
        <slot></slot>
      </template>
      <p>Hello slot one!</p>
    </x-element>
    <x-element><p>Hello slot two!</p></x-element>
    <script type="module">
      const tagName = "x-element";
      if (!customElements.get(tagName)) {
        customElements.define(
          tagName,
          class extends HTMLElement {
            constructor() {
              super();

              if (!this.shadowRoot) {
                const shadow = this.attachShadow({ mode: "open" });
                const previousShadowRoot =
                  document.querySelector(tagName)?.shadowRoot;

                if (previousShadowRoot) {
                  shadow.innerHTML = previousShadowRoot.innerHTML;
                }
              }
            }
          }
        );
      }

      const xApp = document.createElement(tagName);
      const paragraph = document.createElement("p");

      paragraph.append("Hello slot three!");
      xApp.append(paragraph);

      document.body.append(xApp);
    </script>
  </body>
</html>

A place to render web applications

Friday, 29 December 2023

I’ve added a hobby project to my GitHub profile that has been given the title “Apps” as it is a progressive web app that aims to adhere to the App Shell model. The primary routes are prerendered as static HTML during the build process and are loaded lazily at runtime to ensure a smaller client-side JavaScript bundle. The source code is hosted on GitHub and comprises several components that operate within the Angular framework. Check it out at: https://kherrick.github.io/apps/

C# in the Browser Without Blazor

Monday, 28 November 2022

I’ve talked about an experiment with Blazor in the past, but wanted to see how it would go building something small in C# for the browser without going through that process. With .NET 7 it doesn’t seem too hard, so I went ahead and created an example repo to demonstrate.

I am relying on “JSExport” to expose C# to the JavaScript application and have decided to make things simple by using strings for the arguments and return values as well as forgetting about how inefficient this is (for what this is actually doing).

using System.Globalization;
using System.Runtime.InteropServices.JavaScript;

public partial class Calculator
{
  // ...
  [JSExport]
  internal static string add(string first, string second)
  {
    Decimal firstNumber = Decimal.Parse(first, NumberStyles.Float);
    Decimal secondNumber = Decimal.Parse(second, NumberStyles.Float);

    return (firstNumber + secondNumber).ToString();
  }
  // ...
}

Using something like DotNetJS seems more appropriate for use cases like this in the short-term, and I wonder where WASI and Wasmtime .NET solutions will wind up going forward?