Add basic ShadowRoot implementation, polyfill webcomponents

Author: karlseguin

src/browser/State.zig

@@ -29,6 +29,7 @@
 const Env = @import("env.zig").Env;
 const parser = @import("netsurf.zig");
 const DataSet = @import("html/DataSet.zig");
+const ShadowRoot = @import("dom/shadow_root.zig").ShadowRoot;
 const CSSStyleDeclaration = @import("cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 // for HTMLScript (but probably needs to be added to more)
@@ -62,6 +63,8 @@ explicit_index_set: bool = false,
 
 template_content: ?*parser.DocumentFragment = null,
 
+shadow_root: ?*ShadowRoot = null,
+
 const ReadyState = enum {
     loading,
     interactive,

src/browser/dom/document.zig

@@ -123,28 +123,11 @@ pub const Document = struct {
         return try Element.toInterface(e);
     }
 
-    const CreateElementResult = union(enum) {
-        element: ElementUnion,
-        custom: Env.JsObject,
-    };
-
-    pub fn _createElement(self: *parser.Document, tag_name: []const u8, page: *Page) !CreateElementResult {
-        const custom_element = page.window.custom_elements._get(tag_name) orelse {
-            const e = try parser.documentCreateElement(self, tag_name);
-            return .{ .element = try Element.toInterface(e) };
-        };
-
-        var result: Env.Function.Result = undefined;
-        const js_obj = custom_element.newInstance(&result) catch |err| {
-            log.fatal(.user_script, "newInstance error", .{
-                .err = result.exception,
-                .stack = result.stack,
-                .tag_name = tag_name,
-                .source = "createElement",
-            });
-            return err;
-        };
-        return .{ .custom = js_obj };
+    pub fn _createElement(self: *parser.Document, tag_name: []const u8) !ElementUnion {
+        // The element’s namespace is the HTML namespace when document is an HTML document
+        // https://dom.spec.whatwg.org/#ref-for-dom-document-createelement%E2%91%A0
+        const e = try parser.documentCreateElementNS(self, "http://www.w3.org/1999/xhtml", tag_name);
+        return Element.toInterface(e);
     }
 
     pub fn _createElementNS(self: *parser.Document, ns: []const u8, tag_name: []const u8) !ElementUnion {

src/browser/dom/element.zig

@@ -30,6 +30,8 @@ const Node = @import("node.zig").Node;
 const Walker = @import("walker.zig").WalkerDepthFirst;
 const NodeList = @import("nodelist.zig").NodeList;
 const HTMLElem = @import("../html/elements.zig");
+const ShadowRoot = @import("../dom/shadow_root.zig").ShadowRoot;
+
 pub const Union = @import("../html/elements.zig").Union;
 
 // WEB IDL https://dom.spec.whatwg.org/#element
@@ -459,6 +461,44 @@ pub const Element = struct {
         _ = opts;
         return true;
     }
+
+    const AttachShadowOpts = struct {
+        mode: []const u8, // must be specified
+    };
+    pub fn _attachShadow(self: *parser.Element, opts: AttachShadowOpts, page: *Page) !*ShadowRoot {
+        const mode = std.meta.stringToEnum(ShadowRoot.Mode, opts.mode) orelse return error.InvalidArgument;
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        if (state.shadow_root) |sr| {
+            if (mode != sr.mode) {
+                // this is the behavior per the spec
+                return error.NotSupportedError;
+            }
+
+            // TODO: the existing shadow root should be cleared!
+            return sr;
+        }
+
+        // Not sure what to do if there is no owner document
+        const doc = try parser.nodeOwnerDocument(@ptrCast(self)) orelse return error.InvalidArgument;
+        const fragment = try parser.documentCreateDocumentFragment(doc);
+        const sr = try page.arena.create(ShadowRoot);
+        sr.* = .{
+            .host = self,
+            .mode = mode,
+            .proto = fragment,
+        };
+        state.shadow_root = sr;
+        return sr;
+    }
+
+    pub fn get_shadowRoot(self: *parser.Element, page: *Page) ?*ShadowRoot {
+        const state = page.getNodeState(@alignCast(@ptrCast(self))) orelse return null;
+        const sr = state.shadow_root orelse return null;
+        if (sr.mode == .closed) {
+            return null;
+        }
+        return sr;
+    }
 };
 
 // Tests

src/browser/dom/shadow_root.zig

@@ -0,0 +1,66 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <[email protected]>
+// Pierre Tachoire <[email protected]>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const parser = @import("../netsurf.zig");
+const Element = @import("element.zig").Element;
+const ElementUnion = @import("element.zig").Union;
+
+// WEB IDL https://dom.spec.whatwg.org/#interface-shadowroot
+pub const ShadowRoot = struct {
+    pub const prototype = *parser.DocumentFragment;
+    pub const subtype = .node;
+
+    mode: Mode,
+    host: *parser.Element,
+    proto: *parser.DocumentFragment,
+
+    pub const Mode = enum {
+        open,
+        closed,
+    };
+
+    pub fn get_host(self: *const ShadowRoot) !ElementUnion {
+        return Element.toInterface(self.host);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.ShadowRoot" {
+    defer testing.reset();
+
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const div1 = document.createElement('div');", null },
+        .{ "let sr1 = div1.attachShadow({mode: 'open'})", null },
+        .{ "sr1.host == div1", "true" },
+        .{ "div1.attachShadow({mode: 'open'}) == sr1", "true" },
+        .{ "div1.shadowRoot == sr1", "true" },
+
+        .{ "try { div1.attachShadow({mode: 'closed'}) } catch (e) { e }", "Error: NotSupportedError" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const div2 = document.createElement('di2');", null },
+        .{ "let sr2 = div2.attachShadow({mode: 'closed'})", null },
+        .{ "sr2.host == div2", "true" },
+        .{ "div2.shadowRoot", "null" }, // null when attached with 'closed'
+    }, .{});
+}

src/browser/env.zig

@@ -25,6 +25,7 @@ const WebApis = struct {
         @import("css/css.zig").Interfaces,
         @import("cssom/cssom.zig").Interfaces,
         @import("dom/dom.zig").Interfaces,
+        @import("dom/shadow_root.zig").ShadowRoot,
         @import("encoding/text_encoder.zig").Interfaces,
         @import("events/event.zig").Interfaces,
         @import("html/html.zig").Interfaces,
@@ -34,7 +35,6 @@ const WebApis = struct {
         @import("xhr/xhr.zig").Interfaces,
         @import("xhr/form_data.zig").Interfaces,
         @import("xmlserializer/xmlserializer.zig").Interfaces,
-        @import("webcomponents/webcomponents.zig").Interfaces,
     });
 };