@salve-software/react-native-nitro-jsdom 1.0.1 → 2.0.0

package/cpp/quickjs/bindings/LiveCollectionBindings.cpp

@@ -0,0 +1,228 @@
+#include "LiveCollectionBindings.hpp"
+#include "../DOMBindingsInternal.hpp"
+#include "../../lexbor/LexborDocument.hpp"
+#include <lexbor/dom/dom.h>
+#include <cctype>
+#include <cstdlib>
+#include <cstring>
+#include <string>
+#include <vector>
+
+namespace margelo::nitro::nitrojsdom {
+
+namespace {
+
+JSClassID js_live_collection_class_id = 0;
+
+enum class LiveKind { CHILDREN, CHILD_NODES, SELECTOR };
+
+struct LiveCollectionData {
+  void* owner;
+  LiveKind kind;
+  std::string selector;
+};
+
+LiveCollectionData* unwrap_live(JSContext*, JSValue val) {
+  return static_cast<LiveCollectionData*>(JS_GetOpaque(val, js_live_collection_class_id));
+}
+
+std::vector<void*> compute_results(JSContext* ctx, LiveCollectionData* data) {
+  switch (data->kind) {
+    case LiveKind::CHILDREN: {
+      std::vector<void*> out;
+      auto* node = static_cast<lxb_dom_node_t*>(data->owner);
+      for (auto* c = node->first_child; c; c = c->next)
+        if (c->type == LXB_DOM_NODE_TYPE_ELEMENT) out.push_back(c);
+      return out;
+    }
+    case LiveKind::CHILD_NODES: {
+      std::vector<void*> out;
+      auto* node = static_cast<lxb_dom_node_t*>(data->owner);
+      for (auto* c = node->first_child; c; c = c->next) out.push_back(c);
+      return out;
+    }
+    case LiveKind::SELECTOR:
+      if (data->owner) return get_doc(ctx)->querySelectorAllFromEl(data->owner, data->selector);
+      return get_doc(ctx)->querySelectorAll_el(data->selector);
+  }
+  return {};
+}
+
+bool prop_is_index(const std::string& key, size_t& out_idx) {
+  if (key.empty()) return false;
+  for (char c : key) if (!std::isdigit(static_cast<unsigned char>(c))) return false;
+  out_idx = static_cast<size_t>(std::strtoul(key.c_str(), nullptr, 10));
+  return true;
+}
+
+int js_livecoll_get_own_property(JSContext* ctx, JSPropertyDescriptor* desc, JSValue obj, JSAtom prop) {
+  auto* data = unwrap_live(ctx, obj);
+  if (!data) return 0;
+
+  JSValue key_val = JS_AtomToString(ctx, prop);
+  const char* key_c = JS_ToCString(ctx, key_val);
+  std::string key = key_c ? key_c : "";
+  if (key_c) JS_FreeCString(ctx, key_c);
+  JS_FreeValue(ctx, key_val);
+
+  if (key == "length") {
+    if (desc) {
+      desc->flags = JS_PROP_ENUMERABLE;
+      desc->value = JS_NewInt32(ctx, static_cast<int32_t>(compute_results(ctx, data).size()));
+      desc->getter = JS_UNDEFINED;
+      desc->setter = JS_UNDEFINED;
+    }
+    return 1;
+  }
+
+  size_t idx;
+  if (prop_is_index(key, idx)) {
+    auto results = compute_results(ctx, data);
+    if (idx < results.size()) {
+      if (desc) {
+        desc->flags = JS_PROP_ENUMERABLE;
+        desc->value = make_element(ctx, results[idx]);
+        desc->getter = JS_UNDEFINED;
+        desc->setter = JS_UNDEFINED;
+      }
+      return 1;
+    }
+  }
+
+  return 0;
+}
+
+int js_livecoll_get_own_property_names(JSContext* ctx, JSPropertyEnum** ptab, uint32_t* plen, JSValue obj) {
+  *ptab = nullptr;
+  *plen = 0;
+  auto* data = unwrap_live(ctx, obj);
+  if (!data) return 0;
+
+  auto results = compute_results(ctx, data);
+  auto* tab = static_cast<JSPropertyEnum*>(js_malloc(ctx, sizeof(JSPropertyEnum) * (results.size() + 1)));
+  if (!tab) return -1;
+
+  for (size_t i = 0; i < results.size(); i++) {
+    tab[i].is_enumerable = 1;
+    tab[i].atom = JS_NewAtom(ctx, std::to_string(i).c_str());
+  }
+  tab[results.size()].is_enumerable = 0;
+  tab[results.size()].atom = JS_NewAtom(ctx, "length");
+
+  *ptab = tab;
+  *plen = static_cast<uint32_t>(results.size() + 1);
+  return 0;
+}
+
+JSClassExoticMethods js_livecoll_exotic = {
+  .get_own_property       = js_livecoll_get_own_property,
+  .get_own_property_names = js_livecoll_get_own_property_names,
+};
+
+void js_livecoll_finalizer(JSRuntime*, JSValue val) {
+  auto* data = static_cast<LiveCollectionData*>(JS_GetOpaque(val, js_live_collection_class_id));
+  delete data;
+}
+
+JSClassDef js_livecoll_class = { "LiveCollection", .finalizer = js_livecoll_finalizer, .exotic = &js_livecoll_exotic };
+
+const char* kIteratorBootstrapScript = R"JS(
+(function() {
+  var proto = globalThis.__LiveCollectionProto;
+  proto[Symbol.iterator] = function() {
+    var i = 0;
+    var self = this;
+    return {
+      next: function() {
+        return i < self.length ? { value: self[i++], done: false } : { value: undefined, done: true };
+      }
+    };
+  };
+
+  proto.forEach = function(callback, thisArg) {
+    for (var i = 0; i < this.length; i++) callback.call(thisArg, this[i], i, this);
+  };
+
+  function arrayLikeIterator(self, mapEntry) {
+    var i = 0;
+    return {
+      next: function() {
+        if (i >= self.length) return { value: undefined, done: true };
+        var value = mapEntry(i, self[i]);
+        i++;
+        return { value: value, done: false };
+      },
+      [Symbol.iterator]: function() { return this; },
+    };
+  }
+
+  proto.entries = function() {
+    return arrayLikeIterator(this, function(i, v) { return [i, v]; });
+  };
+  proto.keys = function() {
+    return arrayLikeIterator(this, function(i) { return i; });
+  };
+  proto.values = function() {
+    return arrayLikeIterator(this, function(i, v) { return v; });
+  };
+
+  proto.item = function(index) {
+    return index >= 0 && index < this.length ? this[index] : null;
+  };
+
+  // namedItem() is spec'd on HTMLCollection only (matches by id, then by
+  // name), not NodeList — but both share this one LiveCollection class (see
+  // the forEach() comment above), so this stays a no-op-safe lookup for
+  // NodeLists of non-Elements (text/comment nodes have no getAttribute).
+  proto.namedItem = function(name) {
+    for (var i = 0; i < this.length; i++) {
+      var item = this[i];
+      if (typeof item.getAttribute !== 'function') continue;
+      if (item.getAttribute('id') === name || item.getAttribute('name') === name) return item;
+    }
+    return null;
+  };
+
+  delete globalThis.__LiveCollectionProto;
+})();
+)JS";
+
+JSValue make(JSContext* ctx, void* owner, LiveKind kind, const std::string& selector) {
+  auto* data = new LiveCollectionData{ owner, kind, selector };
+  JSValue obj = JS_NewObjectClass(ctx, js_live_collection_class_id);
+  JS_SetOpaque(obj, data);
+  return obj;
+}
+
+} // namespace
+
+void LiveCollectionBindings::install(JSContext* ctx) {
+  if (js_live_collection_class_id == 0) JS_NewClassID(&js_live_collection_class_id);
+  JS_NewClass(JS_GetRuntime(ctx), js_live_collection_class_id, &js_livecoll_class);
+
+  JSValue proto = JS_NewObject(ctx);
+  JS_SetClassProto(ctx, js_live_collection_class_id, JS_DupValue(ctx, proto));
+
+  JSValue global = JS_GetGlobalObject(ctx);
+  JS_SetPropertyStr(ctx, global, "__LiveCollectionProto", proto);
+  JS_FreeValue(ctx, global);
+
+  JSValue result = JS_Eval(ctx, kIteratorBootstrapScript, strlen(kIteratorBootstrapScript),
+                            "<live-collection-bootstrap>", JS_EVAL_TYPE_GLOBAL);
+  if (JS_IsException(result)) JS_FreeValue(ctx, JS_GetException(ctx));
+  JS_FreeValue(ctx, result);
+}
+
+JSValue LiveCollectionBindings::makeChildren(JSContext* ctx, void* element) {
+  return make(ctx, element, LiveKind::CHILDREN, "");
+}
+
+JSValue LiveCollectionBindings::makeChildNodes(JSContext* ctx, void* node) {
+  return make(ctx, node, LiveKind::CHILD_NODES, "");
+}
+
+JSValue LiveCollectionBindings::makeBySelector(JSContext* ctx, void* owner_or_null, const std::string& selector) {
+  return make(ctx, owner_or_null, LiveKind::SELECTOR, selector);
+}
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/LiveCollectionBindings.hpp

@@ -0,0 +1,16 @@
+#pragma once
+
+#include "quickjs.h"
+#include <string>
+
+namespace margelo::nitro::nitrojsdom {
+
+class LiveCollectionBindings {
+public:
+  static void install(JSContext* ctx);
+  static JSValue makeChildren(JSContext* ctx, void* element);
+  static JSValue makeChildNodes(JSContext* ctx, void* node);
+  static JSValue makeBySelector(JSContext* ctx, void* owner_or_null, const std::string& selector);
+};
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/ShadowRootBindings.cpp

@@ -0,0 +1,171 @@
+#include "ShadowRootBindings.hpp"
+#include "DOMExceptionBindings.hpp"
+#include "../DOMBindingsInternal.hpp"
+#include "../QuickJSRuntime.hpp"
+#include "../../lexbor/LexborDocument.hpp"
+#include <lexbor/html/html.h>
+#include <lexbor/dom/dom.h>
+#include <cstring>
+
+namespace margelo::nitro::nitrojsdom {
+
+namespace {
+
+JSClassDef js_shadow_root_class = { "ShadowRoot", .finalizer = nullptr };
+
+lxb_dom_shadow_root_t* unwrap_shadow_root(JSValue val) {
+  return static_cast<lxb_dom_shadow_root_t*>(JS_GetOpaque(val, js_shadow_root_class_id));
+}
+
+JSValue make_shadow_root(JSContext* ctx, void* shadow_ptr) {
+  if (!shadow_ptr) return JS_NULL;
+
+  RuntimeContext* rctx = get_ctx(ctx);
+  if (rctx) {
+    auto it = rctx->node_wrapper_cache.find(shadow_ptr);
+    if (it != rctx->node_wrapper_cache.end()) {
+      return JS_DupValue(ctx, *static_cast<JSValue*>(it->second));
+    }
+  }
+
+  JSValue obj = JS_NewObjectClass(ctx, js_shadow_root_class_id);
+  JS_SetOpaque(obj, shadow_ptr);
+  if (rctx) rctx->node_wrapper_cache[shadow_ptr] = new JSValue(JS_DupValue(ctx, obj));
+  return obj;
+}
+
+JSValue js_shadow_get_host(JSContext* ctx, JSValue this_val) {
+  auto* shadow = unwrap_shadow_root(this_val);
+  if (!shadow) return JS_NULL;
+  return make_element(ctx, shadow->host);
+}
+
+JSValue js_shadow_get_mode(JSContext* ctx, JSValue this_val) {
+  auto* shadow = unwrap_shadow_root(this_val);
+  if (!shadow) return JS_NewString(ctx, "open");
+  return JS_NewString(ctx, shadow->mode == LXB_DOM_SHADOW_ROOT_MODE_CLOSED ? "closed" : "open");
+}
+
+JSValue js_shadow_get_innerHTML(JSContext* ctx, JSValue this_val) {
+  auto* shadow = unwrap_shadow_root(this_val);
+  if (!shadow) return JS_NewString(ctx, "");
+  std::string result;
+  lxb_dom_node_t* child = lxb_dom_interface_node(shadow)->first_child;
+  while (child) { result += serialize_node(child); child = child->next; }
+  return JS_NewString(ctx, result.c_str());
+}
+
+JSValue js_shadow_set_innerHTML(JSContext* ctx, JSValue this_val, JSValue val) {
+  auto* shadow = unwrap_shadow_root(this_val);
+  if (!shadow) return JS_UNDEFINED;
+  const char* html = JS_ToCString(ctx, val);
+  if (!html) return JS_UNDEFINED;
+
+  lxb_dom_node_t* node = lxb_dom_interface_node(shadow);
+  auto* rctx = get_ctx(ctx);
+  std::vector<void*> old_children;
+  lxb_dom_node_t* child = node->first_child;
+  while (child) { old_children.push_back(child); child = child->next; }
+  if (!old_children.empty()) invalidate_node_cache_deep_batch(ctx, rctx, old_children);
+
+  get_doc(ctx)->setInnerHTMLOnShadowRoot(shadow, shadow->host, html);
+  JS_FreeCString(ctx, html);
+  return JS_UNDEFINED;
+}
+
+JSValue js_shadow_querySelector(JSContext* ctx, JSValue this_val, int argc, JSValue* argv) {
+  auto* shadow = unwrap_shadow_root(this_val);
+  if (!shadow || argc < 1) return JS_NULL;
+  const char* sel = JS_ToCString(ctx, argv[0]);
+  if (!sel) return JS_NULL;
+  void* found = get_doc(ctx)->querySelectorFromEl(shadow, sel);
+  JS_FreeCString(ctx, sel);
+  return make_element(ctx, found);
+}
+
+JSValue js_shadow_querySelectorAll(JSContext* ctx, JSValue this_val, int argc, JSValue* argv) {
+  auto* shadow = unwrap_shadow_root(this_val);
+  if (!shadow || argc < 1) return JS_NewArray(ctx);
+  const char* sel = JS_ToCString(ctx, argv[0]);
+  if (!sel) return JS_NewArray(ctx);
+  auto found = get_doc(ctx)->querySelectorAllFromEl(shadow, sel);
+  JS_FreeCString(ctx, sel);
+  return make_element_array(ctx, found);
+}
+
+// ── Element.prototype.attachShadow() / .shadowRoot ────────────────────────────
+
+JSValue js_el_attachShadow(JSContext* ctx, JSValue this_val, int argc, JSValue* argv) {
+  auto* el = unwrap_element(ctx, this_val);
+  if (!el) return JS_UNDEFINED;
+
+  if (argc < 1 || !JS_IsObject(argv[0])) {
+    return JS_ThrowTypeError(ctx, "attachShadow() requires an options object with a 'mode' property");
+  }
+  JSValue mode_val = JS_GetPropertyStr(ctx, argv[0], "mode");
+  if (JS_IsException(mode_val)) return JS_EXCEPTION;
+  const char* mode_str = JS_ToCString(ctx, mode_val);
+  JS_FreeValue(ctx, mode_val);
+  if (!mode_str) return JS_EXCEPTION;
+  bool is_open = strcmp(mode_str, "open") == 0;
+  bool is_closed = strcmp(mode_str, "closed") == 0;
+  JS_FreeCString(ctx, mode_str);
+  if (!is_open && !is_closed) {
+    return JS_ThrowTypeError(ctx, "attachShadow() options.mode must be 'open' or 'closed'");
+  }
+
+  auto* rctx = get_ctx(ctx);
+  if (rctx && rctx->element_shadow_roots.count(el)) {
+    return throw_dom_exception(ctx, "NotSupportedError", "This element already has an attached shadow root.");
+  }
+
+  void* shadow = get_doc(ctx)->createShadowRoot(el, is_closed ? 1 : 0);
+  if (!shadow) return JS_NULL;
+  if (rctx) rctx->element_shadow_roots[el] = shadow;
+
+  return make_shadow_root(ctx, shadow);
+}
+
+JSValue js_el_get_shadowRoot(JSContext* ctx, JSValue this_val) {
+  auto* el = unwrap_element(ctx, this_val);
+  if (!el) return JS_NULL;
+  auto* rctx = get_ctx(ctx);
+  if (!rctx) return JS_NULL;
+  auto it = rctx->element_shadow_roots.find(el);
+  if (it == rctx->element_shadow_roots.end()) return JS_NULL;
+  auto* shadow = static_cast<lxb_dom_shadow_root_t*>(it->second);
+  if (shadow->mode == LXB_DOM_SHADOW_ROOT_MODE_CLOSED) return JS_NULL;
+  return make_shadow_root(ctx, shadow);
+}
+
+} // namespace
+
+void ShadowRootBindings::install(JSContext* ctx) {
+  if (js_shadow_root_class_id == 0) JS_NewClassID(&js_shadow_root_class_id);
+  JS_NewClass(JS_GetRuntime(ctx), js_shadow_root_class_id, &js_shadow_root_class);
+
+  JSValue node_proto = JS_GetClassProto(ctx, js_node_class_id);
+  JSValue proto = JS_NewObjectProto(ctx, node_proto);
+  JS_FreeValue(ctx, node_proto);
+
+  define_prop(ctx, proto, "host",       js_shadow_get_host,       nullptr);
+  define_prop(ctx, proto, "mode",       js_shadow_get_mode,       nullptr);
+  define_prop(ctx, proto, "innerHTML",  js_shadow_get_innerHTML,  js_shadow_set_innerHTML);
+  JS_SetPropertyStr(ctx, proto, "querySelector",
+      JS_NewCFunction(ctx, js_shadow_querySelector, "querySelector", 1));
+  JS_SetPropertyStr(ctx, proto, "querySelectorAll",
+      JS_NewCFunction(ctx, js_shadow_querySelectorAll, "querySelectorAll", 1));
+
+  JS_SetClassProto(ctx, js_shadow_root_class_id, proto);
+  JSValue shadow_proto_ref = JS_GetClassProto(ctx, js_shadow_root_class_id);
+  JS_FreeValue(ctx, define_global_constructor(ctx, "ShadowRoot", shadow_proto_ref));
+  JS_FreeValue(ctx, shadow_proto_ref);
+
+  JSValue element_proto = JS_GetClassProto(ctx, js_element_class_id);
+  JS_SetPropertyStr(ctx, element_proto, "attachShadow",
+      JS_NewCFunction(ctx, js_el_attachShadow, "attachShadow", 1));
+  define_prop(ctx, element_proto, "shadowRoot", js_el_get_shadowRoot, nullptr);
+  JS_FreeValue(ctx, element_proto);
+}
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/ShadowRootBindings.hpp

@@ -0,0 +1,27 @@
+#pragma once
+
+#include "quickjs.h"
+
+namespace margelo::nitro::nitrojsdom {
+
+// Registers the ShadowRoot class (host/mode/innerHTML/querySelector(All),
+// plus Node-proto methods like appendChild/childNodes via prototype chain)
+// and Element.prototype.attachShadow()/shadowRoot.
+//
+// A ShadowRoot wraps a real lxb_dom_shadow_root_t*, which embeds a
+// lxb_dom_document_fragment_t as its first member — so it shares the
+// document fragment's node-tree layout, and generic Node methods work on it
+// unmodified. Lexbor has no attachShadow-equivalent linking a host element
+// to its shadow root, so that association is tracked in
+// RuntimeContext::element_shadow_roots.
+//
+// No slotting/encapsulation/event retargeting — this models just enough of
+// Shadow DOM for scripts that create/query/populate a scoped subtree.
+//
+// Must run after ElementBindings (globalThis.Element, js_node_class_id's
+// proto) and DOMExceptionBindings (NotSupportedError on double-attach).
+struct ShadowRootBindings {
+  static void install(JSContext* ctx);
+};
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/SlotBindings.cpp

@@ -0,0 +1,161 @@
+#include "SlotBindings.hpp"
+#include <cstring>
+
+namespace margelo::nitro::nitrojsdom {
+
+namespace {
+
+const char* kSlotBootstrapScript = R"JS(
+(function() {
+  function isSlotElement(el) {
+    return !!el && el.tagName === 'SLOT';
+  }
+
+  // Elements can carry a slot="..." attribute; anything else (text nodes,
+  // elements without the attribute) is assigned to the default slot ("").
+  function effectiveSlotName(node) {
+    if (node && node.nodeType === 1 && typeof node.getAttribute === 'function') {
+      return node.getAttribute('slot') || '';
+    }
+    return '';
+  }
+
+  // Walks up from a node living INSIDE a shadow tree (e.g. a <slot>) to find
+  // its containing ShadowRoot.
+  function containingShadowRoot(node) {
+    var n = node ? node.parentNode : null;
+    while (n) {
+      if (n instanceof ShadowRoot) return n;
+      n = n.parentNode;
+    }
+    return null;
+  }
+
+  // For a light-DOM child of some shadow host, returns that host's shadow
+  // root (or null if its parent has none / it's closed-mode).
+  function hostShadowRootFor(node) {
+    var parent = node ? node.parentNode : null;
+    return (parent && parent.shadowRoot) ? parent.shadowRoot : null;
+  }
+
+  function slotName(slotEl) {
+    return slotEl.getAttribute('name') || '';
+  }
+
+  // Nodes assigned to `slotEl`: light-DOM children of the shadow root's host
+  // whose effective slot name matches this slot's name, in host child order.
+  function computeAssigned(slotEl) {
+    var root = containingShadowRoot(slotEl);
+    if (!root) return [];
+    var host = root.host;
+    if (!host) return [];
+    var name = slotName(slotEl);
+    var result = [];
+    var child = host.firstChild;
+    while (child) {
+      if (effectiveSlotName(child) === name) result.push(child);
+      child = child.nextSibling;
+    }
+    return result;
+  }
+
+  Element.prototype.assignedNodes = function(options) {
+    if (!isSlotElement(this)) return [];
+    var assigned = computeAssigned(this);
+    if (assigned.length === 0 && options && options.flatten) {
+      var fallback = [];
+      var c = this.firstChild;
+      while (c) { fallback.push(c); c = c.nextSibling; }
+      return fallback;
+    }
+    return assigned;
+  };
+
+  Element.prototype.assignedElements = function(options) {
+    return this.assignedNodes(options).filter(function(n) { return n.nodeType === 1; });
+  };
+
+  // ── slotchange (best-effort — see SlotBindings.hpp for exact triggers) ────
+
+  function sameAssignment(a, b) {
+    if (a.length !== b.length) return false;
+    for (var i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+    return true;
+  }
+
+  function notifySlotChange(root) {
+    if (!root || typeof root.querySelectorAll !== 'function') return;
+    var slots = root.querySelectorAll('slot');
+    for (var i = 0; i < slots.length; i++) {
+      var slot = slots[i];
+      var next = computeAssigned(slot);
+      var prev = slot.__slotAssigned || [];
+      if (!sameAssignment(prev, next)) {
+        slot.__slotAssigned = next;
+        slot.dispatchEvent(new Event('slotchange', { bubbles: true }));
+      }
+    }
+  }
+
+  var origAppendChild = Node.prototype.appendChild;
+  Node.prototype.appendChild = function(child) {
+    var result = origAppendChild.call(this, child);
+    if (this.shadowRoot) notifySlotChange(this.shadowRoot);
+    return result;
+  };
+
+  var origRemoveChild = Node.prototype.removeChild;
+  Node.prototype.removeChild = function(child) {
+    var result = origRemoveChild.call(this, child);
+    if (this.shadowRoot) notifySlotChange(this.shadowRoot);
+    return result;
+  };
+
+  var origSetAttribute = Element.prototype.setAttribute;
+  Element.prototype.setAttribute = function(name, value) {
+    var result = origSetAttribute.call(this, name, value);
+    if (String(name).toLowerCase() === 'slot') {
+      var root = hostShadowRootFor(this);
+      if (root) notifySlotChange(root);
+    }
+    return result;
+  };
+
+  var origRemoveAttribute = Element.prototype.removeAttribute;
+  Element.prototype.removeAttribute = function(name) {
+    var result = origRemoveAttribute.call(this, name);
+    if (String(name).toLowerCase() === 'slot') {
+      var root = hostShadowRootFor(this);
+      if (root) notifySlotChange(root);
+    }
+    return result;
+  };
+
+  var shadowInnerHTMLDesc = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML');
+  if (shadowInnerHTMLDesc && shadowInnerHTMLDesc.set) {
+    var origShadowInnerHTMLSet = shadowInnerHTMLDesc.set;
+    Object.defineProperty(ShadowRoot.prototype, 'innerHTML', {
+      get: shadowInnerHTMLDesc.get,
+      set: function(html) {
+        origShadowInnerHTMLSet.call(this, html);
+        notifySlotChange(this);
+      },
+      enumerable: shadowInnerHTMLDesc.enumerable,
+      configurable: true,
+    });
+  }
+})();
+)JS";
+
+} // namespace
+
+void SlotBindings::install(JSContext* ctx) {
+  JSValue result = JS_Eval(ctx, kSlotBootstrapScript, strlen(kSlotBootstrapScript),
+                            "<slot-bootstrap>", JS_EVAL_TYPE_GLOBAL);
+  if (JS_IsException(result)) {
+    JS_FreeValue(ctx, JS_GetException(ctx));
+  }
+  JS_FreeValue(ctx, result);
+}
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/SlotBindings.hpp

@@ -0,0 +1,44 @@
+#pragma once
+
+#include "quickjs.h"
+
+namespace margelo::nitro::nitrojsdom {
+
+// Registers <slot> assignment: Element.prototype.assignedNodes/
+// assignedElements (tag-checked for "slot"), and a best-effort `slotchange`
+// event. Pure JS, built entirely on top of already-exposed primitives
+// (querySelectorAll, childNodes/parentNode, Element.prototype.shadowRoot,
+// setAttribute/removeAttribute, ShadowRoot.prototype.innerHTML) via
+// monkey-patching — Lexbor itself has no slot concept at all.
+//
+// Assignment algorithm: a light-DOM child of a shadow host is assigned to
+// the <slot> (inside that host's shadow tree) whose `name` matches the
+// child's `slot` attribute (or the unnamed/default slot, if the child has
+// none), computed on demand from the live tree — never cached/stale.
+//
+// Scope/limitations (documented rather than silently wrong):
+// - Does not implement the "first slot with a given name wins" tie-break for
+//   shadow trees with duplicate slot names — assumes one slot per name.
+// - assignedNodes({flatten}) falls back to the slot's own light-DOM children
+//   (its fallback content) when it has no real assignment; it does not
+//   recursively flatten nested slots-inside-slots.
+// - slotchange fires (best-effort, comparing each slot's previous vs.
+//   recomputed assignment) on: host.appendChild()/removeChild(), a
+//   light-DOM child's `slot` attribute changing via setAttribute/
+//   removeAttribute, and ShadowRoot.innerHTML assignment (covers newly
+//   added <slot> elements getting their first, non-empty assignment — the
+//   common attachShadow-then-populate pattern). NOT covered: before/after/
+//   replaceWith/append/prepend on the host, or mutating the shadow tree
+//   itself via appendChild/removeChild on the ShadowRoot directly.
+// - Only reaches shadow roots visible via the public (mode-agnostic-for-us)
+//   Element.prototype.shadowRoot getter, so a *closed*-mode shadow host
+//   won't trigger slotchange from its light-DOM child mutations (the getter
+//   returns null for closed mode by spec) — assignedNodes()/assignedElements()
+//   on the <slot> itself are unaffected and still compute correctly.
+//
+// Must run after ElementBindings, EventBindings, and ShadowRootBindings.
+struct SlotBindings {
+  static void install(JSContext* ctx);
+};
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/TemplateBindings.cpp

@@ -0,0 +1,42 @@
+#include "TemplateBindings.hpp"
+#include "../DOMBindingsInternal.hpp"
+#include "../../lexbor/LexborDocument.hpp"
+#include <lexbor/dom/dom.h>
+#include <cstring>
+#include <cctype>
+
+namespace margelo::nitro::nitrojsdom {
+
+namespace {
+
+bool is_template_element(lxb_dom_element_t* el) {
+  size_t len = 0;
+  const lxb_char_t* name = lxb_dom_element_local_name(el, &len);
+  if (!name || len != 8) return false;
+  for (size_t i = 0; i < len; i++) {
+    if (std::tolower(name[i]) != "template"[i]) return false;
+  }
+  return true;
+}
+
+JSValue js_el_get_content(JSContext* ctx, JSValue this_val) {
+  auto* el = unwrap_element(ctx, this_val);
+  if (!el || !is_template_element(el)) return JS_UNDEFINED;
+  return make_element(ctx, get_doc(ctx)->templateContent(el));
+}
+
+} // namespace
+
+void TemplateBindings::install(JSContext* ctx) {
+  JSValue global = JS_GetGlobalObject(ctx);
+  JSValue element_ctor = JS_GetPropertyStr(ctx, global, "Element");
+  JSValue element_proto = JS_GetPropertyStr(ctx, element_ctor, "prototype");
+
+  define_prop(ctx, element_proto, "content", js_el_get_content, nullptr);
+
+  JS_FreeValue(ctx, element_proto);
+  JS_FreeValue(ctx, element_ctor);
+  JS_FreeValue(ctx, global);
+}
+
+} // namespace margelo::nitro::nitrojsdom