dommy 0.8.0 → 0.9.0

data/lib/dommy/element.rb

@@ -59,22 +59,23 @@ module Dommy
 
     def query_selector(selector)
       return nil if selector.nil?
-      Internal.validate_selector!(selector)
-
-      @document.wrap_node(@__node__.at_css(Internal.backend_safe_selector(selector.to_s)))
+      ast = Internal::SelectorParser.parse!(selector)
+      Internal::SelectorMatcher.query_first(self, ast, scope: self)
     end
 
     def query_selector_all(selector)
       return NodeList.new if selector.nil?
-      Internal.validate_selector!(selector)
-
-      NodeList.new(@__node__.css(Internal.backend_safe_selector(selector.to_s)).map { |n| @document.wrap_node(n) }.compact)
+      ast = Internal::SelectorParser.parse!(selector)
+      NodeList.new(Internal::SelectorMatcher.query(self, ast, scope: self))
     end
 
     def get_element_by_id(id)
-      return nil if id.nil?
+      return nil if id.nil? || id.to_s.empty?
 
-      @document.wrap_node(@__node__.at_css("##{id}"))
+      # getElementById matches the `id` attribute literally, not as a CSS
+      # selector, so escape special characters (e.g. React `useId` `:rjm:`) to a
+      # valid id-selector ident — a raw "##{id}" would be an invalid selector.
+      @document.wrap_node(@__node__.at_css("##{Dommy::CSSNamespace.escape(id)}"))
     end
 
     def __js_get__(key)
@@ -101,6 +102,8 @@ module Dommy
         @__node__.text
       when "ownerDocument"
         @document
+      else
+        Bridge::ABSENT
       end
     end
 
@@ -124,8 +127,8 @@ module Dommy
         is_default_namespace(args[0])
       when "cloneNode"
         deep = args.empty? ? false : !!args[0]
-        deep ? @document.wrap_node(Parser.fragment(@__node__.to_html, owner_doc: @document.nokogiri_doc)) : @document
-          .wrap_node(Parser.fragment("", owner_doc: @document.nokogiri_doc))
+        deep ? @document.wrap_node(Parser.fragment(@__node__.to_html, owner_doc: @document.backend_doc)) : @document
+          .wrap_node(Parser.fragment("", owner_doc: @document.backend_doc))
       when "querySelector"
         query_selector(Internal.css_query_arg!(args))
       when "querySelectorAll"
@@ -169,7 +172,12 @@ module Dommy
 
     def extract_children
       nodes = @__node__.children.to_a
+      return nodes if nodes.empty?
+
       nodes.each(&:unlink)
+      # Inserting a DocumentFragment removes all its children first; the spec
+      # queues a single childList record on the fragment for that removal.
+      @document.notify_child_list_mutation(target_node: @__node__, added_nodes: [], removed_nodes: nodes)
       nodes
     end
 
@@ -207,7 +215,10 @@ module Dommy
       return false unless other.respond_to?(:__dommy_backend_node__)
 
       on = other.__dommy_backend_node__
-      on == @__node__ || on.ancestors.include?(@__node__)
+      # Walk parents rather than the backend's `ancestors`: Makiri omits a
+      # DocumentFragment parent from `ancestors`, so a fragment never appears
+      # to contain its own children. `parent` is consistent across backends.
+      on == @__node__ || Internal::NodeTraversal.ancestor_of?(@__node__, on)
     end
 
     def normalize
@@ -237,6 +248,10 @@ module Dommy
     include Node
     include EventTarget
 
+    # The owning Dommy document (as Element exposes), so cross-document adoption
+    # checks work for text/comment nodes too.
+    attr_reader :document
+
     def __dommy_backend_node__ = @__node__
 
     # EventTarget needs a parent for event propagation; a character-data node
@@ -255,7 +270,12 @@ module Dommy
       rest = full[off..] || ""
       write_data(full[0, off])
       new_node = @document.create_text_node(rest)
-      @__node__.add_next_sibling(new_node.__dommy_backend_node__) if @__node__.parent
+      if @__node__.parent
+        new_bn = new_node.__dommy_backend_node__
+        @__node__.add_next_sibling(new_bn)
+        # The new node is inserted right after self — a childList addition record.
+        @document.notify_child_list_mutation(target_node: @__node__.parent, added_nodes: [new_bn], removed_nodes: [])
+      end
       new_node
     end
 
@@ -392,6 +412,8 @@ module Dommy
         NodeList.new
       when "firstChild", "lastChild"
         nil
+      else
+        Bridge::ABSENT # unknown property: JS undefined, `in` absent
       end
     end
 
@@ -420,9 +442,14 @@ module Dommy
         args[0].respond_to?(:__dommy_backend_node__) &&
           args[0].__dommy_backend_node__ == @__node__
       when "appendChild", "insertBefore"
-        # CharacterData is a leaf — it cannot be a parent.
+        # WebIDL coerces the Node argument first (null/non-Node → TypeError);
+        # only then does a leaf node reject any child with HierarchyRequestError.
+        raise Bridge::TypeError, "Argument is not a Node." unless args[0].is_a?(Dommy::Node)
+
         raise DOMException::HierarchyRequestError, "this node type does not support children"
       when "removeChild", "replaceChild"
+        raise Bridge::TypeError, "Argument is not a Node." unless args[0].is_a?(Dommy::Node)
+
         raise DOMException::NotFoundError, "the node to be removed is not a child of this node"
       when "compareDocumentPosition"
         compare_document_position(args[0])
@@ -598,6 +625,46 @@ module Dommy
     end
   end
 
+  # ProcessingInstruction (`<?target data?>`, nodeType 7) — CharacterData with a
+  # `target`. Backed by a real backend node (created via
+  # document.createProcessingInstruction), so it participates in the tree like
+  # Text/Comment: insertion, ChildNode methods, identity caching and
+  # serialization all come from the shared CharacterDataNode machinery.
+  class ProcessingInstructionNode < CharacterDataNode
+    def node_type
+      7
+    end
+
+    # WHATWG: a ProcessingInstruction's nodeName is its target.
+    def node_name
+      @__node__.target
+    end
+
+    def target
+      @__node__.target
+    end
+
+    def __js_get__(key)
+      case key
+      when "target"
+        @__node__.target
+      else
+        super
+      end
+    end
+
+    # Own __js_call__ methods, on top of CharacterDataNode's.
+    js_methods %w[cloneNode]
+    def __js_call__(method, args)
+      case method
+      when "cloneNode"
+        @document.create_processing_instruction(@__node__.target, @__node__.content)
+      else
+        super
+      end
+    end
+  end
+
   # (`LiveChildren` removed — `el.children` now returns a
   # `Dommy::HTMLCollection` initialized with a re-evaluating block.)
 
@@ -637,6 +704,14 @@ module Dommy
       class_tokens.include?(token.to_s)
     end
 
+    # DOMTokenList membership. Defined explicitly (rather than inheriting
+    # Enumerable#include?, which re-iterates via #each) so a class-selector match
+    # is a single Array#include? over the cached tokens — the hot path under a
+    # querySelector-heavy SPA.
+    def include?(token)
+      class_tokens.include?(token.to_s)
+    end
+
     def add(*tokens)
       update_tokens { |existing| existing | normalize_tokens(tokens) }
       nil
@@ -662,8 +737,12 @@ module Dommy
       idx = tokens.index(old_s)
       return false unless idx
 
-      tokens[idx] = new_s
-      @element.set_attribute(@attribute, tokens.uniq.join(" "))
+      # class_tokens returns the cached token array; dup before mutating so the
+      # in-place assignment can't corrupt the cache (whose key is still the old
+      # raw attribute string, which would then hand stale tokens to later reads).
+      updated = tokens.dup
+      updated[idx] = new_s
+      @element.set_attribute(@attribute, updated.uniq.join(" "))
       true
     end
 
@@ -698,6 +777,8 @@ module Dommy
           i = key.to_i
           token = i.negative? ? nil : class_tokens[i]
           token.nil? ? Bridge::UNDEFINED : token
+        else
+          Bridge::ABSENT # unknown non-index property
         end
       end
     end
@@ -790,7 +871,17 @@ module Dommy
     # return the raw attribute. ASCII whitespace per the spec is space/tab/LF/FF/CR.
     def class_tokens
       raw = @element.__dommy_backend_node__[@attribute].to_s
-      raw.split(/[ \t\n\f\r]+/).reject(&:empty?).uniq
+      # Cache the parsed token list keyed by the raw attribute string: a class
+      # selector match re-reads this for every element on every querySelector,
+      # and the split/reject/uniq dominated heavy-SPA load profiles. The key is
+      # the raw value itself, so any change (add/remove/className=, or a direct
+      # backend mutation) yields a different key and transparently recomputes.
+      cached = @token_cache
+      return cached[1] if cached && cached[0] == raw
+
+      tokens = raw.split(/[ \t\n\f\r]+/).reject(&:empty?).uniq
+      @token_cache = [raw, tokens]
+      tokens
     end
 
     # DOMTokenList "update steps": serialize the (deduplicated) token set back to
@@ -814,7 +905,10 @@ module Dommy
     end
 
     def __js_get__(key)
-      @element.__dommy_backend_node__[attr_name(key)]
+      # A missing data-* attribute reads as JS `undefined` (and `"foo" in dataset`
+      # is false), per DOMStringMap semantics.
+      value = @element.__dommy_backend_node__[attr_name(key)]
+      value.nil? ? Bridge::ABSENT : value
     end
 
     def __js_set__(key, value)
@@ -895,6 +989,8 @@ module Dommy
         @x + @width
       when "bottom"
         @y + @height
+      else
+        Bridge::ABSENT
       end
     end
 
@@ -910,22 +1006,15 @@ module Dommy
       @element = element
     end
 
-    # CSSStyleDeclaration interface: cssText round-trips the full
-    # `style` attribute. Setter parses semicolon-separated entries.
+    # CSSStyleDeclaration interface: cssText serializes the parsed declaration
+    # block (`prop: value;` joined by spaces), dropping invalid declarations.
+    # The setter reparses and rewrites the `style` attribute in that form.
     def css_text
-      properties.map { |k, v| "#{k}:#{v}" }.join(";")
+      serialize_properties(properties)
     end
 
     def css_text=(value)
-      props = {}
-      value.to_s.split(";").each do |entry|
-        key, val = entry.split(":", 2)
-        next unless key && val
-
-        props[key.strip] = val.strip
-      end
-
-      write_properties(props)
+      write_properties(parse_declarations(value))
     end
 
     def length
@@ -978,7 +1067,10 @@ module Dommy
         if key.is_a?(Integer) || key.to_s.match?(/\A-?\d+\z/)
           self[key.to_i]
         else
-          properties[method_to_css_name(key)]
+          # An unset CSS property reads as "" (per CSSStyleDeclaration), not nil —
+          # `el.style.display` is "" until assigned, which `v-show` and other
+          # display-toggling code compares against.
+          properties[method_to_css_name(key)] || ""
         end
       end
     end
@@ -1041,20 +1133,48 @@ module Dommy
     end
 
     def properties
-      raw = @element.__dommy_backend_node__["style"].to_s
-      raw.split(";").each_with_object({}) do |entry, out|
+      parse_declarations(@element.__dommy_backend_node__["style"].to_s)
+    end
+
+    # Parse a declaration block into an ordered { property => value } hash,
+    # dropping declarations whose value is invalid (empty, or — like the second
+    # colon in "color:: invalid" — containing a bare colon outside parentheses).
+    def parse_declarations(str)
+      str.to_s.split(";").each_with_object({}) do |entry, out|
         key, value = entry.split(":", 2)
         next unless key && value
 
-        out[key.strip] = value.strip
+        name = key.strip
+        val = value.strip
+        next if name.empty? || !valid_declaration_value?(val)
+
+        out[name] = val
+      end
+    end
+
+    def valid_declaration_value?(value)
+      return false if value.empty?
+
+      depth = 0
+      value.each_char do |c|
+        case c
+        when "(" then depth += 1
+        when ")" then depth -= 1 if depth.positive?
+        when ":" then return false if depth.zero?
+        end
       end
+      true
+    end
+
+    def serialize_properties(props)
+      props.map { |k, v| "#{k}: #{v};" }.join(" ")
     end
 
     def write_properties(props)
       if props.empty?
         @element.remove_attribute("style") if @element.__dommy_backend_node__.key?("style")
       else
-        @element.set_attribute("style", props.map { |k, v| "#{k}:#{v}" }.join(";"))
+        @element.set_attribute("style", serialize_properties(props))
       end
     end
   end
@@ -1101,11 +1221,18 @@ module Dommy
     end
 
     def text_content=(value)
-      # `node.content =` removes all existing children and (if value is
-      # non-empty) appends a single text node. Capture before/after to feed
-      # MutationObserver.
+      # Setting textContent removes all existing children and, only for a
+      # non-empty value, appends a single text node. Capture before/after to
+      # feed MutationObserver. The empty case clears children directly: the
+      # backend's `content=` is the parser's, and Makiri leaves an empty text
+      # node behind for "" (Nokogiri and the DOM produce no node at all).
       removed = @__node__.children.to_a
-      @__node__.content = value.to_s
+      str = value.to_s
+      if str.empty?
+        removed.each(&:unlink)
+      else
+        @__node__.content = str
+      end
       added = @__node__.children.to_a
       notify_child_list(added: added, removed: removed)
     end
@@ -1127,10 +1254,28 @@ module Dommy
       else
         @__node__.inner_html = value.to_s
         @document.migrate_template_descendants(@__node__)
+        mark_fragment_scripts_started(@__node__.children.to_a)
       end
       notify_child_list(added: @__node__.children.to_a, removed: removed)
     end
 
+    # Per the HTML fragment parsing algorithm, a <script> created while parsing a
+    # fragment (innerHTML / insertAdjacentHTML / outerHTML) has its "already
+    # started" flag set, so it never executes when inserted. Flag every script in
+    # the freshly parsed backend subtree before the connection notification —
+    # which is what would otherwise run them — fires.
+    def mark_fragment_scripts_started(backend_nodes)
+      backend_nodes.each do |nk|
+        next unless nk.respond_to?(:element?) && nk.element?
+
+        if nk.name == "script"
+          wrapped = @document.wrap_node(nk)
+          wrapped&.__internal_mark_script_already_started__ if wrapped.respond_to?(:__internal_mark_script_already_started__)
+        end
+        mark_fragment_scripts_started(nk.children.to_a) if nk.respond_to?(:children)
+      end
+    end
+
     HTML_NAMESPACE = "http://www.w3.org/1999/xhtml"
 
     # Record the namespace/prefix/localName an element was created with via
@@ -1158,6 +1303,16 @@ module Dommy
       @__ns_prefix
     end
 
+    # The [namespace, prefix, local_name] explicitly assigned via createElementNS,
+    # or nil when the element wasn't created with an explicit namespace. Lets the
+    # XML serializer recover element-namespace info the makiri backend (lexbor,
+    # HTML-only) doesn't retain.
+    def __internal_created_namespace__
+      return nil unless @__ns_qname
+
+      [@__ns_uri, @__ns_prefix, @__ns_local]
+    end
+
     def id
       @__node__["id"].to_s
     end
@@ -1315,6 +1470,7 @@ module Dommy
       anchor = @__node__.next_sibling
       removed = @__node__
       new_nodes = fragment.children.to_a
+      mark_fragment_scripts_started(new_nodes)
       @__node__.unlink
       if anchor
         new_nodes.reverse_each { |n| anchor.add_previous_sibling(n) }
@@ -1340,9 +1496,18 @@ module Dommy
     # ShadowRoot, fragment, or self if detached). If the element lives
     # inside a shadow tree, returns that ShadowRoot. Otherwise walks
     # until we hit the Nokogiri Document (then returns the Document).
-    def root_node
+    def root_node(options = nil)
+      composed = options.is_a?(Hash) && EventTarget.js_truthy?(options.key?("composed") ? options["composed"] : options[:composed])
       sr = @document.__internal_shadow_root_containing__(@__node__)
-      return sr if sr
+      if sr
+        # Default: the shadow root is the root. `composed: true` is
+        # shadow-including — cross the boundary and continue from the host, so
+        # the topmost document is returned.
+        return sr unless composed
+        return sr.host.root_node({"composed" => true}) if sr.host.respond_to?(:root_node)
+
+        return sr
+      end
 
       current = @__node__
       attached = false
@@ -1365,17 +1530,33 @@ module Dommy
     alias get_root_node root_node
 
     # Merge adjacent text node siblings and drop empty text nodes.
+    # WHATWG Node.normalize: drop empty Text nodes and merge each run of
+    # contiguous Text nodes into the first, firing the matching mutation records
+    # (childList for every removed node, characterData for the merged data).
     def normalize
-      @__node__.traverse do |node|
-        next unless node.text?
-        next if node.parent.nil?
-
-        if node.content == "" && node.parent
-          node.unlink
-        elsif node.next && node.next.text?
-          node.content = node.content + node.next.content
-          node.next.unlink
+      text_nodes = []
+      @__node__.traverse { |node| text_nodes << node if node.respond_to?(:text?) && node.text? }
+
+      text_nodes.each do |node|
+        next unless node.parent # already removed as part of an earlier run
+
+        if node.content.to_s.empty?
+          @document.remove_node_with_notify(node)
+          next
         end
+
+        merged = []
+        sib = node.next
+        while sib.respond_to?(:text?) && sib.text?
+          merged << sib
+          sib = sib.next
+        end
+        next if merged.empty?
+
+        old = node.content.to_s
+        node.content = old + merged.map { |m| m.content.to_s }.join
+        @document.notify_character_data_mutation(target_node: node, old_value: old)
+        merged.each { |m| @document.remove_node_with_notify(m) }
       end
 
       nil
@@ -1398,11 +1579,8 @@ module Dommy
 
     def matches?(selector)
       return false if selector.nil?
-      Internal.validate_selector!(selector)
-
-      # `:scope` pseudo — match against this element itself.
-      sel = Internal.backend_safe_selector(selector.to_s).gsub(":scope", "*:nth-last-child(n)")
-      matches_selector?(@__node__, sel)
+      ast = Internal::SelectorParser.parse!(selector)
+      Internal::SelectorMatcher.matches?(self, ast, scope: self)
     end
 
     def get_elements_by_class_name(name)
@@ -1476,6 +1654,26 @@ module Dommy
       set_attribute("slot", value.to_s)
     end
 
+    # `assignedSlot` — for a slottable (a direct light-DOM child of a shadow
+    # host), the `<slot>` in the host's *open* shadow tree it composes into,
+    # else null. Per the spec's "open flag", a closed shadow tree always
+    # returns null (mirrors `Element#shadowRoot` being null when closed).
+    def assigned_slot
+      parent = @__node__.parent
+      return nil unless parent.respond_to?(:element?) && parent.element?
+
+      host = @document.wrap_node(parent)
+      return nil unless host.respond_to?(:shadow_root)
+
+      sr = host.shadow_root
+      return nil unless sr
+
+      slot_name = @__node__.element? ? @__node__["slot"].to_s : ""
+      sr.query_selector_all("slot").find do |slot|
+        (slot.respond_to?(:name) ? slot.name.to_s : "") == slot_name
+      end
+    end
+
     def role
       @__node__["role"].to_s
     end
@@ -1484,6 +1682,38 @@ module Dommy
       set_attribute("role", value.to_s)
     end
 
+    # The WAI-ARIA computed role (what `getByRole` / WPT's get_computed_role
+    # report): an explicit valid `role` attribute, else the implicit HTML role.
+    def computed_role
+      Internal::AriaRole.compute(self)
+    end
+
+    # The WAI-ARIA accessible name (WPT's get_computed_label): aria-labelledby /
+    # aria-label / native label / name-from-content / title.
+    def computed_label
+      Internal::AccessibleName.compute(self)
+    end
+
+    # The WAI-ARIA accessible description: aria-describedby / aria-description /
+    # title (title only when not already used as the accessible name).
+    def computed_description
+      Internal::AccessibleDescription.compute(self)
+    end
+
+    # The accessibility tree rooted at this element (a synthetic root whose
+    # children are this element's accessible nodes). See
+    # Internal::AccessibilityTree.
+    def accessibility_tree
+      Internal::AccessibilityTree.build(self)
+    end
+    alias_method :aria_tree, :accessibility_tree
+
+    # A Playwright-compatible ARIA snapshot (indented YAML outline) of this
+    # element's accessibility subtree.
+    def aria_snapshot
+      Internal::AriaSnapshot.serialize(accessibility_tree)
+    end
+
     # `Node.baseURI` — resolves against the document's base URL, which
     # in turn honors the first `<base href>` element (see
     # `Document#base_uri`).
@@ -1503,9 +1733,9 @@ module Dommy
       seen = {}
       loop do
         # Guard against unexpected cycles in malformed trees.
-        return false if seen[current.object_id]
+        return false if seen[Backend.identity_key(current)]
 
-        seen[current.object_id] = true
+        seen[Backend.identity_key(current)] = true
 
         parent = current.respond_to?(:parent) ? current.parent : nil
         return false unless parent
@@ -1652,6 +1882,7 @@ module Dommy
 
       fragment = Parser.fragment(html.to_s, owner_doc: @__node__.document)
       nodes = fragment.children.to_a
+      mark_fragment_scripts_started(nodes)
       # `add_previous_sibling` inserts immediately before the anchor, so a forward
       # walk preserves document order; `add_next_sibling` inserts immediately
       # after, so afterend walks in reverse to keep order.
@@ -1784,21 +2015,75 @@ module Dommy
       inner_html
     end
 
+    # `click()` runs the HTML activation behavior around the dispatched event:
+    # pre-click activation may change state (e.g. toggle a checkbox), the click
+    # is dispatched, and then either the activation behavior runs (not canceled)
+    # or the pre-click state is restored (default prevented). Elements with no
+    # activation behavior (the default) just dispatch the event.
     def click
-      dispatch_event(MouseEvent.new("click", "bubbles" => true, "cancelable" => true, "button" => 0))
+      pre = pre_click_activation_state
+      not_canceled = dispatch_event(MouseEvent.new("click", "bubbles" => true, "cancelable" => true, "button" => 0))
+      return not_canceled if pre.nil?
+
+      if not_canceled
+        run_post_click_activation(pre)
+      else
+        restore_pre_click_activation(pre)
+      end
+      not_canceled
+    end
+
+    # Activation-behavior hooks. The default element has none; HTMLInputElement
+    # overrides these for checkbox/radio.
+    def pre_click_activation_state
+      nil
     end
 
+    def run_post_click_activation(_state); end
+
+    def restore_pre_click_activation(_state); end
+
     def get_attribute_names
       Backend.attribute_nodes(@__node__).map(&:name)
     end
 
-    # No layout engine — geometry getters return zeroed rects.
+    # No real layout engine. By default geometry getters return zeroed rects;
+    # when the window opts into approximate geometry (window.approximate_layout)
+    # they return non-zero estimates from a cheap pseudo-layout so a site that
+    # treats an all-zero rect as "the DOM is broken" can proceed.
     def get_bounding_client_rect
-      DOMRect.new
+      approximate_layout? ? DOMRect.new(**__internal_approx_box) : DOMRect.new
+    end
+
+    def approximate_layout? = !!@document&.default_view&.approximate_layout
+
+    # Estimate {x, y, width, height} (CSS px) without laying out the page: block
+    # elements fill the viewport width; inline elements are sized to their text;
+    # height is the wrapped line count × a nominal line height. Position is the
+    # origin (we don't position elements). Used only when approximate_layout?.
+    INLINE_TAGS = %w[a span b i em strong small code label abbr cite q sub sup time mark u s
+                     tt var samp kbd bdi bdo wbr big font nobr].freeze
+    APPROX_CHAR_PX = 8
+    APPROX_LINE_PX = 20
+
+    def __internal_approx_box
+      viewport = @document&.default_view&.inner_width.to_i
+      viewport = 1280 if viewport <= 0
+      text = text_content.to_s
+      content_px = text.length * APPROX_CHAR_PX
+      if INLINE_TAGS.include?(local_name.to_s.downcase)
+        {x: 0, y: 0, width: [content_px, viewport].min, height: text.empty? ? 0 : APPROX_LINE_PX}
+      else
+        lines = text.empty? ? 0 : [(content_px.to_f / viewport).ceil, 1].max
+        {x: 0, y: 0, width: viewport, height: lines * APPROX_LINE_PX}
+      end
     end
 
     def get_client_rects
-      []
+      return [] unless approximate_layout?
+
+      box = __internal_approx_box
+      box[:width].positive? || box[:height].positive? ? [DOMRect.new(**box)] : []
     end
 
     def request_fullscreen
@@ -1849,22 +2134,19 @@ module Dommy
         1
       when "isConnected"
         is_connected?
-      when
-          "scrollTop",
-          "scrollLeft",
-          "scrollWidth",
-          "scrollHeight",
-          "clientWidth",
-          "clientHeight",
-          "clientTop",
-          "clientLeft",
-          "offsetWidth",
-          "offsetHeight",
-          "offsetTop",
-          "offsetLeft"
-        # No layout engine — zeroed values match what real browsers
-        # report for hidden / pre-paint elements.
+      when "scrollTop", "scrollLeft", "clientTop", "clientLeft", "offsetTop", "offsetLeft"
+        # Position-ish metrics: 0 (we never lay elements out in the page), as a
+        # real browser reports for hidden / pre-paint elements.
         0
+      when "clientWidth", "clientHeight", "scrollWidth", "scrollHeight", "offsetWidth", "offsetHeight"
+        # Size metrics: 0 by default; a best-effort estimate when the window opts
+        # into approximate geometry (see #get_bounding_client_rect).
+        if approximate_layout?
+          box = __internal_approx_box
+          key.end_with?("Width") ? box[:width] : box[:height]
+        else
+          0
+        end
       when "offsetParent"
         nil
       when "popover"
@@ -1960,6 +2242,8 @@ module Dommy
         base_uri
       when "shadowRoot"
         shadow_root
+      when "assignedSlot"
+        assigned_slot
       when "ownerDocument"
         @document
       else
@@ -1978,6 +2262,18 @@ module Dommy
         elsif key.start_with?("on") && key.length > 2
           # `el.onXxx` event handler property — the registered callback or nil.
           @on_handlers&.[](event_name_from_on(key))
+        elsif key.start_with?("_") || key.include?("$")
+          # A framework-private expando key (React stores per-node state under
+          # keys like `__reactListeners$<id>` and feature-detects it with
+          # `node[key] === undefined`). Real DOM property names never use `_`/`$`,
+          # so reporting these *absent* (undefined value, `in` false) is correct
+          # JS and doesn't touch real DOM reflection (which WPT pins to null).
+          Bridge::ABSENT
+        else
+          # A genuinely-unknown element property: JS `undefined`, `in` false.
+          # (Reflected / ARIA / on* IDL attributes are handled above and keep
+          # their nullable-DOMString null semantics.)
+          Bridge::ABSENT
         end
       end
     end
@@ -2159,6 +2455,12 @@ module Dommy
           remove_attribute(name)
         end
 
+      when "style"
+        # WHATWG [PutForwards=cssText]: `el.style = "..."` forwards to
+        # `el.style.cssText`, reparsing and rewriting the `style` attribute.
+        # Handling it here stops the bridge from stashing a string expando that
+        # would shadow the CSSStyleDeclaration getter.
+        @style.css_text = value.nil? ? "" : value.to_s
       when "className"
         set_attribute("class", value.to_s)
       when "classList"
@@ -2210,9 +2512,16 @@ module Dommy
       scrollTo scrollBy requestFullscreen showPopover hidePopover togglePopover isEqualNode
       hasChildNodes hasAttributes getRootNode normalize contains
       compareDocumentPosition isSameNode lookupNamespaceURI lookupPrefix isDefaultNamespace
+      __internal_computed_role__ __internal_computed_label__ __internal_computed_description__
     ]
     def __js_call__(method, args)
       case method
+      when "__internal_computed_role__"
+        computed_role
+      when "__internal_computed_label__"
+        computed_label
+      when "__internal_computed_description__"
+        computed_description
       when "hasChildNodes"
         has_child_nodes?
       when "hasAttributes"
@@ -2254,7 +2563,7 @@ module Dommy
       when "getElementsByTagName"
         get_elements_by_tag_name(args[0])
       when "getRootNode"
-        get_root_node
+        get_root_node(args[0])
       when "normalize"
         normalize
       when "insertAdjacentElement"
@@ -2443,24 +2752,8 @@ module Dommy
 
     def closest(selector)
       return nil if selector.nil?
-      Internal.validate_selector!(selector)
-
-      # Elements matching the selector (scoped to this element, so `:scope`
-      # resolves here), then return the nearest inclusive ancestor among them.
-      handler = Internal.scoped_pseudo_handlers(@__node__)
-      safe = Internal.backend_safe_selector(selector.to_s)
-      matched = with_selector_errors(selector) do
-        @document.nokogiri_doc.css(safe, handler).map(&:pointer_id)
-      end
-
-      node = @__node__
-      while node&.element?
-        return @document.wrap_node(node) if matched.include?(node.pointer_id)
-
-        node = node.parent
-      end
-
-      nil
+      ast = Internal::SelectorParser.parse!(selector)
+      Internal::SelectorMatcher.closest(self, ast)
     end
 
     # Map Nokogiri's selector errors to spec behavior:
@@ -2468,16 +2761,8 @@ module Dommy
     #   syntactically invalid → SyntaxError (querySelector/closest must throw);
     # - an "Unregistered function" means a valid pseudo Nokogiri compiled but
     #   can't evaluate (`:hover`, `:invalid`, …) → degrade to matching nothing.
-    def with_selector_errors(selector)
-      yield
-    rescue ::StandardError => e
-      return [] if e.message.include?("Unregistered function")
-
-      if (defined?(::Nokogiri::CSS::SyntaxError) && e.is_a?(::Nokogiri::CSS::SyntaxError)) || e.message.include?("unexpected")
-        raise DOMException::SyntaxError, "'#{selector}' is not a valid selector."
-      end
-
-      raise
+    def with_selector_errors(selector, &block)
+      Internal.with_selector_errors(selector, &block)
     end
 
     # Web Animations: start an animation on this element.
@@ -2504,36 +2789,32 @@ module Dommy
       return nil if selector.nil?
       # The empty string is not a valid selector (an explicit DOMString "" is a
       # SyntaxError; `null` coerces to "null" and is handled above as nil).
-      Internal.validate_selector!(selector)
+      sel = selector.to_s
+      doc = owner_document
+      key = [object_id, :first, sel]
+      if doc && (hit = doc.__internal_scoped_query_get(key))
+        return hit.first # [result] tuple — distinguishes a cached nil match from a miss
+      end
 
-      @document.wrap_node(scoped_query(selector.to_s).first)
+      ast = Internal::SelectorParser.parse!(selector)
+      result = Internal::SelectorMatcher.query_first(self, ast, scope: self)
+      doc&.__internal_scoped_query_set(key, [result])
+      result
     end
 
     def query_selector_all(selector)
       return NodeList.new if selector.nil?
-      Internal.validate_selector!(selector)
-
-      NodeList.new(scoped_query(selector.to_s).map { |node| @document.wrap_node(node) }.compact)
-    end
-
-    # Run a CSS query rooted at this element. A `:scope` selector must resolve to
-    # this element, but Nokogiri scopes `el.css` to descendants (`.//`), which
-    # excludes the element itself — so for `:scope` queries we evaluate against
-    # the whole document (where this element IS reachable) and restrict the
-    # results to this element's own subtree.
-    def scoped_query(sel)
-      sel = Internal.backend_safe_selector(sel)
-      handler = Internal.scoped_pseudo_handlers(@__node__)
-      with_selector_errors(sel) do
-        if sel.include?(":scope")
-          self_id = @__node__.pointer_id
-          @document.nokogiri_doc.css(sel, handler).select do |n|
-            n.ancestors.any? { |a| a.pointer_id == self_id }
-          end
-        else
-          @__node__.css(sel, handler)
-        end
+      sel = selector.to_s
+      doc = owner_document
+      key = [object_id, :all, sel]
+      if doc && (hit = doc.__internal_scoped_query_get(key))
+        return NodeList.new(hit) # NodeList.new copies, so the cached array is never aliased
       end
+
+      ast = Internal::SelectorParser.parse!(selector)
+      matches = Internal::SelectorMatcher.query(self, ast, scope: self)
+      doc&.__internal_scoped_query_set(key, matches)
+      NodeList.new(matches)
     end
 
     # XPath queries scoped to this element, returning wrapped nodes.
@@ -2552,20 +2833,21 @@ module Dommy
     end
 
     def insert_before(child, reference)
-      check_hierarchy!(child)
+      coerce_node_argument!(child)
+      # WHATWG: if the reference child is the node being inserted, the reference
+      # becomes that node's next sibling, so "insert x before x" doesn't move x.
+      reference = wrapped_next_sibling(reference) if same_wrapped_node?(reference, child)
+      ensure_pre_insertion_validity!(child, reference)
       nodes = detach_dom_nodes(child)
-      if reference.nil?
+      if reference.nil? || (defined?(Bridge::UNDEFINED) && reference.equal?(Bridge::UNDEFINED))
         append_dom_nodes(nodes)
       else
+        # The reference is guaranteed (by validity) to be a child here. Insert in
+        # order before it: each new node becomes its immediate previous sibling,
+        # so forward iteration yields the original order (reverse would flip a
+        # multi-node fragment).
         ref_node = unwrap_dom_node(reference)
-        if ref_node&.parent != @__node__
-          # Per spec this should be a NotFoundError, but the legacy
-          # behaviour of `appendChild` when reference is foreign is a
-          # silent append. Preserve that for compatibility.
-          append_dom_nodes(nodes)
-        else
-          nodes.reverse_each { |node| ref_node.add_previous_sibling(node) }
-        end
+        nodes.each { |node| ref_node.add_previous_sibling(node) }
       end
 
       notify_child_list(added: nodes)
@@ -2573,6 +2855,7 @@ module Dommy
     end
 
     def remove_child(child)
+      coerce_node_argument!(child)
       node = unwrap_dom_node(child)
       unless node&.parent == @__node__
         raise DOMException::NotFoundError, "node is not a child of this element"
@@ -2588,26 +2871,46 @@ module Dommy
     # MutationObserver of both changes in one record so observers
     # see the swap atomically.
     def replace_child(new_child, old_child)
+      coerce_node_argument!(new_child)
+      coerce_node_argument!(old_child)
+      # replaceChild shares the pre-insertion checks (ancestor, node type,
+      # doctype placement); the reference child here is old_child, so step 3
+      # also enforces that it is actually a child (NotFoundError otherwise).
+      ensure_pre_insertion_validity!(new_child, old_child)
       old_node = unwrap_dom_node(old_child)
-      return nil unless old_node&.parent == @__node__
 
+      # Capture the insertion point (old's next sibling) before detaching the new
+      # child, which may itself be old (replaceChild(x, x)) or old's sibling.
+      anchor = old_node.next_sibling
       new_nodes = detach_dom_nodes(new_child)
-      new_nodes.reverse_each { |node| old_node.add_previous_sibling(node) }
-      old_node.unlink
-      notify_child_list(added: new_nodes, removed: [old_node])
+      anchor = nil if anchor && anchor.parent != @__node__
+
+      # detach_dom_nodes already removed old when new_child === old_child; only
+      # unlink (and record the removal) when old is still attached.
+      removed = []
+      if old_node.parent == @__node__
+        old_node.unlink
+        removed = [old_node]
+      end
+
+      if anchor
+        new_nodes.each { |node| anchor.add_previous_sibling(node) }
+      else
+        new_nodes.each { |node| @__node__.add_child(node) }
+      end
+      notify_child_list(added: new_nodes, removed: removed)
       old_child
     end
 
     def clone_node(deep_arg)
-      # Copy the node in place via libxml's deep dup, NOT by re-parsing to_html as
-      # a fragment: the HTML fragment parser unwraps `<body>` / `<head>` /
-      # `<html>`, so cloning a body produced its children, not a body element
-      # (which broke Turbo's snapshot cache — it clones the body and restores it
-      # via documentElement.replaceChild on back/forward). dup(1) preserves the
-      # element's namespace and attributes (createElement would lose the
-      # namespace); for a shallow clone we keep that node but drop its subtree.
-      copy = @__node__.dup(1)
-      copy.children.each(&:unlink) unless deep_arg
+      # Copy the node in place via the backend's deep clone, NOT by re-parsing
+      # to_html as a fragment: the HTML fragment parser unwraps `<body>` /
+      # `<head>` / `<html>`, so cloning a body would produce its children, not a
+      # body element (which broke Turbo's snapshot cache — it clones the body and
+      # restores it via documentElement.replaceChild on back/forward). The clone
+      # preserves the element's namespace and attributes (createElement would
+      # lose the namespace).
+      copy = Backend.clone_node(@__node__, deep: deep_arg)
       @document.wrap_node(copy)
     end
 
@@ -2760,6 +3063,20 @@ module Dommy
       detach_dom_nodes(value).first
     end
 
+    # Whether two wrapped values back the same backend node (used to detect
+    # `insertBefore(x, x)`).
+    def same_wrapped_node?(a, b)
+      an = a.respond_to?(:__dommy_backend_node__) ? a.__dommy_backend_node__ : nil
+      bn = b.respond_to?(:__dommy_backend_node__) ? b.__dommy_backend_node__ : nil
+      !an.nil? && an == bn
+    end
+
+    # The wrapped next sibling of a wrapped reference node (nil at end of list).
+    def wrapped_next_sibling(reference)
+      nk = reference.respond_to?(:__dommy_backend_node__) ? reference.__dommy_backend_node__&.next : nil
+      nk && @document.wrap_node(nk)
+    end
+
     def unwrap_dom_node(value)
       return value.__dommy_backend_node__ if value.respond_to?(:__dommy_backend_node__)
 
@@ -2767,11 +3084,41 @@ module Dommy
     end
 
     def matches_selector?(node, selector)
-      if node.respond_to?(:matches?)
-        node.matches?(selector)
-      else
-        node.document.css(selector).any? { |candidate| candidate == node }
+      return false if node.nil?
+
+      # A valid pseudo the backend can't evaluate (`:active`, `:invalid`, …)
+      # degrades to not-matching ([] from the rescue) — the same policy as
+      # the query methods.
+      result = with_selector_errors(selector) { matches_selector_uncaught?(node, selector) }
+      result == [] ? false : result
+    end
+
+    def matches_selector_uncaught?(node, selector)
+      return node.document.css(selector).any? { |candidate| candidate == node } unless node.respond_to?(:matches?)
+
+      # A detached node (no parent) breaks Nokogiri's `matches?`, which evaluates
+      # `ancestors.last.search(selector)` — `ancestors.last` is nil with no
+      # ancestors. matches() ignores connectivity (a disconnected element still
+      # matches a selector it satisfies — e.g. Stimulus checks a just-removed
+      # outlet element), so give a parentless node a transient fragment root,
+      # then restore its detached state.
+      if node.respond_to?(:parent) && node.parent.nil? &&
+         node.respond_to?(:document) && node.document.respond_to?(:fragment)
+        return matches_detached_node?(node, selector)
       end
+
+      node.matches?(selector)
+    end
+
+    # Match a parentless node by wrapping it in a throwaway fragment so the
+    # backend's `matches?` has an ancestor root, then unlinking to leave the
+    # node detached (and its parentNode unchanged) as it was. `fragment("")`
+    # (not the no-arg form) is backend-agnostic — Makiri's takes a source string.
+    def matches_detached_node?(node, selector)
+      node.document.fragment("").add_child(node)
+      node.matches?(selector)
+    ensure
+      node.unlink
     end
 
     # No real layout — record the scroll request so tests can assert it.