@remote-dom/polyfill 0.0.1

package/build/typescript/constants.d.ts

@@ -0,0 +1,35 @@
+export declare const NAME: unique symbol;
+export declare const VALUE: unique symbol;
+export declare const NS: unique symbol;
+export declare const OWNER_ELEMENT: unique symbol;
+export declare const OWNER_DOCUMENT: unique symbol;
+export declare const ATTRIBUTES: unique symbol;
+export declare const PREV: unique symbol;
+export declare const NEXT: unique symbol;
+export declare const CHILD: unique symbol;
+export declare const PARENT: unique symbol;
+export declare const DATA: unique symbol;
+export declare const USER_PROPERTIES: unique symbol;
+export declare const LISTENERS: unique symbol;
+export declare const IS_TRUSTED: unique symbol;
+export declare const CONTENT: unique symbol;
+export declare const SLOT: unique symbol;
+export declare const enum NodeType {
+    NODE = 0,
+    ELEMENT_NODE = 1,
+    ATTRIBUTE_NODE = 2,
+    TEXT_NODE = 3,
+    CDATA_SECTION_NODE = 4,
+    ENTITY_REFERENCE_NODE = 5,
+    ENTITY_NODE = 6,
+    PROCESSING_INSTRUCTION_NODE = 7,
+    COMMENT_NODE = 8,
+    DOCUMENT_NODE = 9,
+    DOCUMENT_TYPE_NODE = 10,
+    DOCUMENT_FRAGMENT_NODE = 11
+}
+export declare const enum NamespaceURI {
+    XHTML = "http://www.w3.org/1999/xhtml",
+    SVG = "http://www.w3.org/2000/svg"
+}
+//# sourceMappingURL=constants.d.ts.map

package/build/typescript/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../source/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,eAAiB,CAAC;AACnC,eAAO,MAAM,KAAK,eAAkB,CAAC;AACrC,eAAO,MAAM,EAAE,eAAe,CAAC;AAC/B,eAAO,MAAM,aAAa,eAAkB,CAAC;AAC7C,eAAO,MAAM,cAAc,eAA2B,CAAC;AACvD,eAAO,MAAM,UAAU,eAAuB,CAAC;AAC/C,eAAO,MAAM,IAAI,eAAiB,CAAC;AACnC,eAAO,MAAM,IAAI,eAAiB,CAAC;AACnC,eAAO,MAAM,KAAK,eAAkB,CAAC;AACrC,eAAO,MAAM,MAAM,eAAmB,CAAC;AACvC,eAAO,MAAM,IAAI,eAAiB,CAAC;AACnC,eAAO,MAAM,eAAe,eAA4B,CAAC;AACzD,eAAO,MAAM,SAAS,eAAsB,CAAC;AAC7C,eAAO,MAAM,UAAU,eAAsB,CAAC;AAC9C,eAAO,MAAM,OAAO,eAAoB,CAAC;AACzC,eAAO,MAAM,IAAI,eAAiB,CAAC;AAGnC,0BAAkB,QAAQ;IACxB,IAAI,IAAI;IACR,YAAY,IAAI;IAChB,cAAc,IAAI;IAClB,SAAS,IAAI;IACb,kBAAkB,IAAI;IACtB,qBAAqB,IAAI;IACzB,WAAW,IAAI;IACf,2BAA2B,IAAI;IAC/B,YAAY,IAAI;IAChB,aAAa,IAAI;IACjB,kBAAkB,KAAK;IACvB,sBAAsB,KAAK;CAC5B;AAED,0BAAkB,YAAY;IAC5B,KAAK,iCAAiC;IACtC,GAAG,+BAA+B;CACnC"}

package/build/typescript/hooks.d.ts

@@ -0,0 +1,13 @@
+export interface Hooks {
+    createElement(element: Element, ns?: string | null): void;
+    setAttribute(element: Element, name: string, value: string, ns?: string | null): void;
+    removeAttribute(element: Element, name: string, ns?: string | null): void;
+    createText(text: Text, data: string): void;
+    setText(text: Text, data: string): void;
+    insertChild(parent: Element, node: Element | Text, index: number): void;
+    removeChild(parent: Element, node: Element | Text, index: number): void;
+    addEventListener(element: EventTarget, type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(element: EventTarget, type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void;
+}
+export declare const hooks: Partial<Hooks>;
+//# sourceMappingURL=hooks.d.ts.map

package/build/typescript/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../source/hooks.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1D,YAAY,CACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GACjB,IAAI,CAAC;IACR,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1E,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxE,WAAW,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxE,gBAAgB,CACd,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CACjB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,GAAG,IAAI,EACnD,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAAM,CAAC"}

package/build/typescript/index.d.ts

@@ -0,0 +1,3 @@
+export { hooks, type Hooks } from './hooks.ts';
+export { Window } from './Window.ts';
+//# sourceMappingURL=index.d.ts.map

package/build/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,KAAK,KAAK,EAAC,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC"}

package/build/typescript/selectors.d.ts

@@ -0,0 +1,32 @@
+import type { Element } from './Element.ts';
+import type { ParentNode } from './ParentNode.ts';
+declare const enum Combinator {
+    Descendant = 0,
+    Child = 1,
+    Sibling = 2,
+    Adjacent = 3,
+    Inner = 4
+}
+declare const enum MatcherType {
+    Unknown = 0,
+    Element = 1,
+    Id = 2,
+    Class = 3,
+    Attribute = 4,
+    Pseudo = 5,
+    Function = 6
+}
+interface Part {
+    combinator: Combinator;
+    matchers: Matcher[];
+}
+interface Matcher {
+    type: MatcherType;
+    name: string;
+    value?: string;
+}
+export declare function querySelector(within: ParentNode, selector: string): null;
+export declare function querySelectorAll(within: ParentNode, selector: string): Element[];
+export declare function parseSelector(selector: string): Part[];
+export {};
+//# sourceMappingURL=selectors.d.ts.map

package/build/typescript/selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../source/selectors.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAEhD,mBAAW,UAAU;IACnB,UAAU,IAAA;IACV,KAAK,IAAA;IACL,OAAO,IAAA;IACP,QAAQ,IAAA;IACR,KAAK,IAAA;CACN;AAED,mBAAW,WAAW;IACpB,OAAO,IAAA;IACP,OAAO,IAAA;IACP,EAAE,IAAA;IACF,KAAK,IAAA;IACL,SAAS,IAAA;IACT,MAAM,IAAA;IACN,QAAQ,IAAA;CACT;AAED,UAAU,IAAI;IACZ,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,UAAU,OAAO;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,aAAa,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,QAYjE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAWpE;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,UA0C7C"}

package/build/typescript/serialization.d.ts

@@ -0,0 +1,6 @@
+import type { Node } from './Node.ts';
+import type { ParentNode } from './ParentNode.ts';
+export declare function parseHtml(html: string, contextNode: Node): import("./DocumentFragment.ts").DocumentFragment;
+export declare function serializeChildren(parentNode: ParentNode): string;
+export declare function serializeNode(node: Node): string;
+//# sourceMappingURL=serialization.d.ts.map

package/build/typescript/serialization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialization.d.ts","sourceRoot":"","sources":["../../source/serialization.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAGpC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAiBhD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,oDA8BxD;AAED,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,UAAU,UAQvD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,UAsCvC"}

package/build/typescript/shared.d.ts

@@ -0,0 +1,16 @@
+import type { Document } from './Document.ts';
+import type { DocumentFragment } from './DocumentFragment.ts';
+import type { Node } from './Node.ts';
+import type { Comment } from './Comment.ts';
+import type { ParentNode } from './ParentNode.ts';
+import type { Element } from './Element.ts';
+import type { CharacterData } from './CharacterData.ts';
+import type { Text } from './Text.ts';
+export declare function isCharacterData(node: Node): node is CharacterData;
+export declare function isTextNode(node: Node): node is Text;
+export declare function isCommentNode(node: Node): node is Comment;
+export declare function isElementNode(node: Node): node is Element;
+export declare function isDocumentFragmentNode(node: Node): node is DocumentFragment;
+export declare function isParentNode(node: Node): node is ParentNode;
+export declare function cloneNode(node: Node, deep?: boolean, document?: Document): Node;
+//# sourceMappingURL=shared.d.ts.map

package/build/typescript/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../source/shared.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAEpC,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,IAAI,aAAa,CAEjE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,IAAI,IAAI,CAEnD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,IAAI,OAAO,CAEzD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,IAAI,OAAO,CAEzD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,IAAI,gBAAgB,CAE3E;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,IAAI,UAAU,CAE3D;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,IAAI,EACV,IAAI,CAAC,EAAE,OAAO,EACd,QAAQ,GAAE,QAA6B,GACtC,IAAI,CAyCN"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@remote-dom/polyfill",
+  "type": "module",
+  "license": "MIT",
+  "description": "A polyfill for the browser APIs used by Remote DOM",
+  "publishConfig": {
+    "access": "public",
+    "@remote-dom/registry": "https://registry.npmjs.org"
+  },
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Shopify/remote-dom",
+    "directory": "packages/polyfill"
+  },
+  "exports": {
+    ".": {
+      "types": "./build/typescript/index.d.ts",
+      "quilt:source": "./source/index.ts",
+      "quilt:esnext": "./build/esnext/index.esnext",
+      "import": "./build/esm/index.mjs"
+    }
+  },
+  "types": "./build/typescript/index.d.ts",
+  "sideEffects": false,
+  "browserslist": [
+    "defaults and not dead"
+  ],
+  "scripts": {
+    "build": "rollup --config ./rollup.config.js"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,3 @@
+import {quiltPackage} from '@quilted/rollup/package';
+
+export default quiltPackage();

package/source/Attr.ts

@@ -0,0 +1,70 @@
+import {hooks} from './hooks.ts';
+import {
+  NS,
+  NEXT,
+  VALUE,
+  OWNER_ELEMENT,
+  NAME,
+  NamespaceURI,
+  NodeType,
+} from './constants.ts';
+import {Node} from './Node.ts';
+import type {Element} from './Element.ts';
+
+export class Attr extends Node {
+  nodeType = NodeType.ATTRIBUTE_NODE;
+  [NS]: NamespaceURI | null = null;
+  [NEXT]: Attr | null = null;
+  [VALUE]: string;
+  [OWNER_ELEMENT]: Element | null = null;
+  isConnected = false;
+
+  constructor(name: string, value: string, namespace?: NamespaceURI | null) {
+    super();
+    this[NAME] = name;
+    this[VALUE] = value;
+    if (namespace) this[NS] = namespace;
+  }
+
+  get nodeName() {
+    return this[NAME];
+  }
+
+  set nodeName(_readonly: string) {}
+  get name() {
+    return this[NAME];
+  }
+
+  set name(_readonly: string) {}
+  get value() {
+    return this[VALUE];
+  }
+
+  set value(value: string) {
+    const str = String(value);
+    this[VALUE] = str;
+    const ownerElement = this[OWNER_ELEMENT];
+    if (!ownerElement) return;
+    hooks.setAttribute?.(ownerElement as any, this[NAME], str, this[NS]);
+  }
+
+  get nodeValue() {
+    return this.value;
+  }
+
+  set nodeValue(value: string) {
+    this.value = value;
+  }
+
+  get ownerElement() {
+    return this[OWNER_ELEMENT];
+  }
+
+  get namespaceURI() {
+    return this[NS];
+  }
+
+  get specified() {
+    return true;
+  }
+}

package/source/CharacterData.ts

@@ -0,0 +1,29 @@
+import {hooks} from './hooks.ts';
+import {DATA} from './constants.ts';
+import {ChildNode} from './ChildNode.ts';
+
+export class CharacterData extends ChildNode {
+  [DATA] = '';
+
+  constructor(data: any) {
+    super();
+    this.setData(data);
+  }
+
+  protected setData(data: any) {
+    let str = '';
+    if (data != null) {
+      str = typeof data === 'string' ? data : String(data);
+    }
+    this[DATA] = str;
+    hooks.setText?.(this as any, str);
+  }
+
+  get data() {
+    return this[DATA];
+  }
+
+  set data(data: any) {
+    this.setData(data);
+  }
+}

package/source/ChildNode.ts

@@ -0,0 +1,45 @@
+import {NEXT} from './constants.ts';
+import type {ParentNode} from './ParentNode.ts';
+import {Node} from './Node.ts';
+
+export class ChildNode extends Node {
+  remove() {
+    const parent = this.parentNode;
+    if (!parent) return;
+    parent.removeChild(this);
+  }
+
+  replaceWith(...nodes: (Node | string)[]) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const node = toNode(parent, nodes[0]);
+    const next = node[NEXT];
+    parent.replaceChild(this, node);
+    for (let i = 1; i < nodes.length; i++) {
+      parent.insertBefore(toNode(parent, nodes[i]), next);
+    }
+  }
+
+  before(...nodes: (Node | string)[]) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    for (const node of nodes) {
+      parent.insertBefore(toNode(parent, node), this);
+    }
+  }
+
+  after(...nodes: (Node | string)[]) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const next = this[NEXT];
+    for (const node of nodes) {
+      parent.insertBefore(toNode(parent, node), next);
+    }
+  }
+}
+
+export function toNode(parent: ParentNode, node: Node | any) {
+  if (node instanceof Node) return node;
+  const ownerDocument = parent.ownerDocument;
+  return ownerDocument.createTextNode(String(node));
+}

package/source/Comment.ts

@@ -0,0 +1,7 @@
+import {NAME} from './constants.ts';
+import {CharacterData} from './CharacterData.ts';
+
+export class Comment extends CharacterData {
+  nodeType = 8;
+  [NAME] = '#comment';
+}

package/source/CustomElementRegistry.ts

@@ -0,0 +1,52 @@
+export class CustomElementRegistryImplementation
+  implements CustomElementRegistry
+{
+  private registry = new Map<string, CustomElementConstructor>();
+  private listenersByName = new Map<
+    string,
+    ((Constructor: CustomElementConstructor) => void)[]
+  >();
+
+  define(
+    name: string,
+    Constructor: CustomElementConstructor,
+    _options?: ElementDefinitionOptions,
+  ) {
+    this.registry.set(name, Constructor);
+
+    const listeners = this.listenersByName.get(name);
+
+    if (listeners == null) return;
+
+    this.listenersByName.delete(name);
+
+    for (const listener of listeners) {
+      listener(Constructor);
+    }
+  }
+
+  get(name: string) {
+    return this.registry.get(name);
+  }
+
+  whenDefined(name: string) {
+    const Constructor = this.registry.get(name);
+
+    if (Constructor != null) return Promise.resolve(Constructor);
+
+    let listeners = this.listenersByName.get(name);
+
+    if (listeners == null) {
+      listeners = [];
+      this.listenersByName.set(name, listeners);
+    }
+
+    return new Promise<CustomElementConstructor>((resolve) => {
+      listeners!.push(resolve);
+    });
+  }
+
+  upgrade(_root: Node) {
+    // TODO
+  }
+}

package/source/CustomEvent.ts

@@ -0,0 +1,30 @@
+import {Event} from './Event.ts';
+
+export class CustomEvent<T = any> extends Event {
+  /**
+   * Returns any custom data event was created with. Typically used for synthetic events.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+   */
+  readonly detail: T;
+
+  constructor(type: string, eventInitDict?: CustomEventInit<T>) {
+    super(type, eventInitDict);
+    this.detail = eventInitDict?.detail as any;
+  }
+
+  /**
+   * Returns any custom data event was created with. Typically used for synthetic events.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+   */
+  initCustomEvent(
+    type: string,
+    bubbles?: boolean,
+    cancelable?: boolean,
+    detail?: T,
+  ) {
+    super.initEvent(type, bubbles, cancelable);
+    (this as any).detail = detail;
+  }
+}

package/source/Document.ts

@@ -0,0 +1,112 @@
+import {NS, NAME, NamespaceURI, NodeType, OWNER_DOCUMENT} from './constants.ts';
+import type {Window} from './Window.ts';
+import type {Node} from './Node.ts';
+import {Event} from './Event.ts';
+import {ParentNode} from './ParentNode.ts';
+import {Element} from './Element.ts';
+import {SVGElement} from './SVGElement.ts';
+import {Text} from './Text.ts';
+import {Comment} from './Comment.ts';
+import {DocumentFragment} from './DocumentFragment.ts';
+import {HTMLTemplateElement} from './HTMLTemplateElement.ts';
+import {isParentNode, cloneNode} from './shared.ts';
+
+export class Document extends ParentNode {
+  nodeType = NodeType.DOCUMENT_NODE;
+  [NAME] = '#document';
+
+  constructor(public defaultView: Window) {
+    super();
+    this[OWNER_DOCUMENT] = this;
+  }
+
+  createElement(localName: string) {
+    const lowerName = String(localName).toLowerCase();
+
+    if (lowerName === 'template') {
+      return createElement(new HTMLTemplateElement(), this, 'template');
+    }
+
+    const CustomElement = this.defaultView.customElements.get(localName);
+
+    if (CustomElement) {
+      return createElement(new CustomElement() as any, this, localName);
+    } else {
+      return createElement(new Element(), this, localName);
+    }
+  }
+
+  createElementNS(localName: string, namespaceURI?: NamespaceURI) {
+    if (namespaceURI === NamespaceURI.SVG) {
+      return createElement(new SVGElement(), this, localName);
+    }
+
+    return createElement(new Element(), this, localName, namespaceURI);
+  }
+
+  createTextNode(data: any) {
+    return createNode(new Text(data), this);
+  }
+
+  createComment(data: any) {
+    return createNode(new Comment(data), this);
+  }
+
+  createDocumentFragment() {
+    return createNode(new DocumentFragment(), this);
+  }
+
+  createEvent() {
+    return new Event('');
+  }
+
+  importNode(node: Node, deep?: boolean) {
+    return cloneNode(node, deep, this);
+  }
+
+  adoptNode(node: Node) {
+    if (node[OWNER_DOCUMENT] === this) return node;
+
+    node.parentNode?.removeChild(node);
+    adoptNode(node, this);
+
+    return node;
+  }
+}
+
+export function createNode<T extends Node>(node: T, ownerDocument: Document) {
+  Object.defineProperty(node, OWNER_DOCUMENT, {
+    value: ownerDocument,
+    writable: true,
+    enumerable: false,
+  });
+
+  return node;
+}
+
+export function createElement<T extends Element>(
+  element: T,
+  ownerDocument: Document,
+  name: string,
+  namespace?: NamespaceURI,
+) {
+  createNode(element, ownerDocument);
+
+  Object.defineProperty(element, NAME, {value: name});
+
+  if (namespace) {
+    Object.defineProperty(element, NS, {value: namespace});
+  }
+
+  return element;
+}
+
+export function adoptNode(node: Node, document: Document) {
+  node[OWNER_DOCUMENT] = document;
+
+  if (isParentNode(node)) {
+    for (const child of node.childNodes) {
+      adoptNode(child, document);
+    }
+  }
+}

package/source/DocumentFragment.ts

@@ -0,0 +1,8 @@
+import {NAME, OWNER_DOCUMENT, NodeType} from './constants.ts';
+import {ParentNode} from './ParentNode.ts';
+
+export class DocumentFragment extends ParentNode {
+  nodeType = NodeType.DOCUMENT_FRAGMENT_NODE;
+  [NAME] = '#document-fragment';
+  [OWNER_DOCUMENT] = window.document as any;
+}

package/source/Element.ts

@@ -0,0 +1,119 @@
+import {NS, SLOT, ATTRIBUTES, NamespaceURI, NodeType} from './constants.ts';
+import {ParentNode} from './ParentNode.ts';
+import {NamedNodeMap} from './NamedNodeMap.ts';
+import {Attr} from './Attr.ts';
+import {serializeNode, serializeChildren, parseHtml} from './serialization.ts';
+
+export class Element extends ParentNode {
+  static readonly observedAttributes?: string[];
+
+  nodeType = NodeType.ELEMENT_NODE;
+
+  [NS] = NamespaceURI.XHTML;
+  [SLOT] = '';
+  get namespaceURI() {
+    return this[NS];
+  }
+
+  get tagName() {
+    return this.nodeName;
+  }
+
+  [ATTRIBUTES]!: NamedNodeMap;
+
+  [anyProperty: string]: any;
+
+  get slot() {
+    return this[SLOT];
+  }
+
+  set slot(slot: string) {
+    const finalSlot = String(slot);
+    this[SLOT] = finalSlot;
+    if (this.getAttribute('slot') !== finalSlot) {
+      this.attributes.setNamedItem(new Attr('slot', finalSlot));
+    }
+  }
+
+  get attributes() {
+    let attributes = this[ATTRIBUTES];
+    if (!attributes) {
+      attributes = new NamedNodeMap(this);
+      this[ATTRIBUTES] = attributes;
+    }
+    return attributes;
+  }
+
+  get firstElementChild() {
+    return this.children[0] ?? null;
+  }
+
+  get lastElementChild() {
+    return this.children[this.children.length - 1] ?? null;
+  }
+
+  get nextElementSibling() {
+    let sib = this.nextSibling;
+    while (sib && sib.nodeType !== 1) sib = sib.nextSibling;
+    return sib;
+  }
+
+  get previewElementSibling() {
+    let sib = this.previousSibling;
+    while (sib && sib.nodeType !== 1) sib = sib.previousSibling;
+    return sib;
+  }
+
+  setAttribute(name: string, value: string) {
+    this.attributes.setNamedItem(new Attr(name, String(value)));
+  }
+
+  setAttributeNS(namespace: NamespaceURI | null, name: string, value: string) {
+    this.attributes.setNamedItemNS(new Attr(name, String(value), namespace));
+  }
+
+  getAttribute(name: string) {
+    const attr = this.attributes.getNamedItem(name);
+    return attr && attr.value;
+  }
+
+  getAttributeNS(namespace: NamespaceURI | null, name: string) {
+    const attr = this.attributes.getNamedItemNS(namespace, name);
+    return attr && attr.value;
+  }
+
+  hasAttribute(name: string) {
+    const attr = this.attributes.getNamedItem(name);
+    return attr != null;
+  }
+
+  hasAttributeNS(namespace: NamespaceURI | null, name: string) {
+    const attr = this.attributes.getNamedItemNS(namespace, name);
+    return attr != null;
+  }
+
+  removeAttribute(name: string) {
+    this.attributes.removeNamedItem(name);
+  }
+
+  removeAttributeNS(namespace: NamespaceURI | null, name: string) {
+    this.attributes.removeNamedItemNS(namespace, name);
+  }
+
+  get outerHTML() {
+    return serializeNode(this);
+  }
+
+  get innerHTML() {
+    return serializeChildren(this);
+  }
+
+  set innerHTML(html: any) {
+    if (html == null || html === '') {
+      this.replaceChildren();
+    } else {
+      const fragment = parseHtml(String(html), this);
+      this.replaceChildren(fragment);
+    }
+  }
+}