@dooboostore/dom-parser 1.0.2 → 1.0.4

package/src/node/elements/ElementBase.ts

@@ -1,1248 +1,884 @@
 import { ParentNodeBase } from '../ParentNodeBase';
-import { ChildNodeBase } from '../ChildNodeBase';
-import { HTMLCollection } from "../collection";
-import { Text } from "../Text";
-import { ElementFactory } from "../../factory/ElementFactory";
-import { Element, DOMTokenList, Attr, NamedNodeMap, DOMRect } from './Element';
+import { HTMLCollectionImp, HTMLCollectionOfImp } from '../collection';
 import { ELEMENT_NODE, TEXT_NODE, ATTRIBUTE_NODE } from '../Node';
 import { CSSSelector } from '../../utils/CSSSelector';
-import { HTMLElementTagNameMap } from "./index";
 import { NodeBase } from '../NodeBase';
-
-// InsertPosition type for insertAdjacent methods
-type InsertPosition = 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend';
+import { ShadowRootBase } from '../ShadowRootBase';
 
 // Simple DOMException class for error handling
 class DOMException extends Error {
-    constructor(message: string, public name: string = 'DOMException') {
-        super(message);
-        this.name = name;
-    }
+  constructor(
+    message: string,
+    public name: string = 'DOMException'
+  ) {
+    super(message);
+    this.name = name;
+  }
 }
+
 /**
  * Base implementation of the Element interface
  */
+// @ts-ignore
 export abstract class ElementBase extends ParentNodeBase implements Element {
-    private _id: string = '';
-    private _className: string = '';
-    private _attributes: Map<string, string> = new Map();
-
-    constructor(
-        public _tagName: string,
-        ownerDocument?: any
-    ) {
-        super(ELEMENT_NODE, _tagName.toUpperCase(), ownerDocument);
-    }
-
-    get tagName(): string {
-        return this._tagName.toUpperCase();
-    }
-
-    get localName(): string {
-        return this._tagName.toLowerCase();
-    }
-
-    // Element interface implementation
-    get id(): string {
-        return this._id;
-    }
-
-    set id(value: string) {
-        this._id = value;
-        this._attributes.set('id', value);
-    }
-
-    get className(): string {
-        return this._className;
-    }
-
-    set className(value: string) {
-        this._className = value;
-        this._attributes.set('class', value);
-    }
-
-    get classList(): DOMTokenList {
-        return new DOMTokenListImpl(this);
-    }
-
-    get innerHTML(): string {
-        // Generate innerHTML from actual child nodes
-        let html = '';
-        for (const child of this._childNodesInternal) {
-            if (child.nodeType === TEXT_NODE) {
-                // For text nodes, use the escaped content stored in _nodeValue
-                html += (child as any)._nodeValue || '';
-            } else if (child.nodeType === ELEMENT_NODE) {
-                // Generate outerHTML directly to avoid circular dependency
-                html += this.generateChildElementHTML(child as any);
-            } else if (child.nodeType === 8) { // COMMENT_NODE
-                html += `<!--${(child as any).textContent || ''}-->`;
-            }
-        }
-        return html;
-    }
-
-    get innerText(): string {
-        // innerText should return the decoded text content
-        return this.textContent || '';
-    }
-
-    set innerText(value: string | null) {
-        // Clear all children and add escaped text content
-        this._childNodesInternal = [];
-        if (value !== null && value !== undefined) {
-            const stringValue = String(value);
-            const escapedValue = this.escapeHTMLEntities(stringValue);
-            // Create text node with escaped content
-            const { TextBase } = require('../TextBase');
-            const textNode = new TextBase(escapedValue, this._ownerDocument);
-            this._childNodesInternal.push(textNode);
-            textNode._parentNodeInternal = this;
+  /**
+   * Static dependencies to break circular references without using 'require' or 'global'.
+   * These are injected by the main DomParser entry point.
+   */
+  public static dependencies: {
+    ElementFactory?: any;
+    TextBase?: any;
+    Comment?: any;
+  } = {};
+
+  private _id: string = '';
+  private _className: string = '';
+  private _attributes: Map<string, string> = new Map();
+  private _shadowRoot: ShadowRoot | null = null;
+
+  constructor(
+    public _tagName: string = 'DIV',
+    ownerDocument?: any
+  ) {
+    super(ELEMENT_NODE, _tagName.toUpperCase(), ownerDocument);
+  }
+
+  ariaActiveDescendantElement: Element;
+  ariaAtomic: string;
+  ariaAutoComplete: string;
+  ariaBrailleLabel: string;
+  ariaBrailleRoleDescription: string;
+  ariaBusy: string;
+  ariaChecked: string;
+  ariaColCount: string;
+  ariaColIndex: string;
+  ariaColIndexText: string;
+  ariaColSpan: string;
+  ariaControlsElements: readonly Element[];
+  ariaCurrent: string;
+  ariaDescribedByElements: readonly Element[];
+  ariaDescription: string;
+  ariaDetailsElements: readonly Element[];
+  ariaDisabled: string;
+  ariaErrorMessageElements: readonly Element[];
+  ariaExpanded: string;
+  ariaFlowToElements: readonly Element[];
+  ariaHasPopup: string;
+  ariaHidden: string;
+  ariaInvalid: string;
+  ariaKeyShortcuts: string;
+  ariaLabel: string;
+  ariaLabelledByElements: readonly Element[];
+  ariaLevel: string;
+  ariaLive: string;
+  ariaModal: string;
+  ariaMultiLine: string;
+  ariaMultiSelectable: string;
+  ariaOrientation: string;
+  ariaOwnsElements: readonly Element[];
+  ariaPlaceholder: string;
+  ariaPosInSet: string;
+  ariaPressed: string;
+  ariaReadOnly: string;
+  ariaRelevant: string;
+  ariaRequired: string;
+  ariaRoleDescription: string;
+  ariaRowCount: string;
+  ariaRowIndex: string;
+  ariaRowIndexText: string;
+  ariaRowSpan: string;
+  ariaSelected: string;
+  ariaSetSize: string;
+  ariaSort: string;
+  ariaValueMax: string;
+  ariaValueMin: string;
+  ariaValueNow: string;
+  ariaValueText: string;
+  role: string;
+  animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation {
+    throw new Error('Method not implemented.');
+  }
+  getAnimations(options?: GetAnimationsOptions): Animation[] {
+    throw new Error('Method not implemented.');
+  }
+
+  get tagName(): string {
+    return this._tagName.toUpperCase();
+  }
+
+  get localName(): string {
+    return this._tagName.toLowerCase();
+  }
+
+  // Element interface implementation
+  get id(): string {
+    return this._id;
+  }
+
+  set id(value: string) {
+    this._id = value;
+    this._attributes.set('id', value);
+  }
+
+  get className(): string {
+    return this._className;
+  }
+
+  set className(value: string) {
+    this._className = value;
+    this._attributes.set('class', value);
+  }
+
+  get classList(): DOMTokenList {
+    return new (DOMTokenListImpl as any)(this);
+  }
+
+  get innerHTML(): string {
+    // Generate innerHTML from actual child nodes
+    let html = '';
+    for (const child of this._childNodesInternal) {
+      if (child.nodeType === TEXT_NODE) {
+        // For text nodes, use the escaped content stored in _nodeValue
+        html += (child as any)._nodeValue || '';
+      } else if (child.nodeType === ELEMENT_NODE) {
+        // Generate outerHTML directly to avoid circular dependency
+        html += this.generateChildElementHTML(child as any);
+      } else if (child.nodeType === 8) {
+        // COMMENT_NODE
+        html += `<!--${(child as any).textContent || ''}-->`;
+      }
+    }
+    return html;
+  }
+
+  get innerText(): string {
+    // innerText should return the decoded text content
+    return this.textContent || '';
+  }
+
+  set innerText(value: string | null) {
+    // Clear all children and add escaped text content
+    this._childNodesInternal = [];
+    if (value !== null && value !== undefined) {
+      const stringValue = String(value);
+      const escapedValue = this.escapeHTMLEntities(stringValue);
+
+      const { TextBase } = ElementBase.dependencies;
+      if (TextBase) {
+        const textNode = new TextBase(escapedValue, this._ownerDocument);
+        this._childNodesInternal.push(textNode);
+        (textNode as any)._parentNodeInternal = this;
+      }
+    }
+  }
+
+  set innerHTML(value: string) {
+    // Clear existing children
+    while (this._childNodesInternal.length > 0) {
+      const child = this._childNodesInternal[0];
+      if (child) {
+        this.removeChild(child);
+      }
+    }
+
+    // Parse HTML and create child nodes
+    if (value.trim()) {
+      this.parseAndAppendHTML(value);
+    }
+  }
+
+  /**
+   * Generate HTML for a child element without using outerHTML to avoid circular dependency
+   */
+  private generateChildElementHTML(element: any): string {
+    const tagName = element.tagName.toLowerCase();
+    // Get attributes
+    const attrs = Array.from(element._attributes?.entries() || [])
+      .map(([name, value]: [string, string]) => (value === '' ? ` ${name}` : ` ${name}="${String(value).replace(/"/g, '&quot;')}"`))
+      .join('');
+
+    // Check if it's a self-closing tag
+    const selfClosingTags = ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'];
+    const isSelfClosing = selfClosingTags.includes(tagName);
+
+    if (isSelfClosing) {
+      return `<${tagName}${attrs} />`;
+    } else {
+      // Generate innerHTML directly without calling element.innerHTML to avoid recursion
+      let childHTML = '';
+
+      // Add Declarative Shadow DOM if present
+      if (element.shadowRoot) {
+        childHTML += `<template shadowrootmode="${element.shadowRoot.mode}">${element.shadowRoot.innerHTML}</template>`;
+      }
+
+      for (const child of element._childNodesInternal || []) {
+        if (child.nodeType === TEXT_NODE) {
+          childHTML += (child as any)._nodeValue || '';
+        } else if (child.nodeType === ELEMENT_NODE) {
+          childHTML += this.generateChildElementHTML(child as any);
+        } else if (child.nodeType === 8) {
+          // COMMENT_NODE
+          childHTML += `<!--${(child as any).textContent || ''}-->`;
         }
+      }
+      return `<${tagName}${attrs}>${childHTML}</${tagName}>`;
     }
+  }
 
-    set innerHTML(value: string) {
-        // Clear existing children
-        while (this._childNodesInternal.length > 0) {
-            const child = this._childNodesInternal[0];
-            if (child) {
-                this.removeChild(child);
-            }
-        }
+  /**
+   * Improved HTML parser for innerHTML using a stack-based approach
+   */
+  private parseAndAppendHTML(html: string, targetNode: any = this): void {
+    const { ElementFactory, TextBase, Comment } = ElementBase.dependencies;
 
-        // Parse HTML and create child nodes
-        if (value.trim()) {
-            this.parseAndAppendHTML(value);
-        }
+    if (!ElementFactory) {
+      // Fallback for direct library usage without entry point initialization
+      console.error('SWC DOM Parser: ElementFactory dependency not injected.');
+      return;
     }
 
-    /**
-     * Generate HTML for a child element without using outerHTML to avoid circular dependency
-     */
-    private generateChildElementHTML(element: any): string {
-        const tagName = element.tagName.toLowerCase();
-        // Get attributes
-        const attrs = Array.from(element._attributes?.entries() || [])
-            .map(([name, value]: [string, string]) => value === '' ? ` ${name}` : ` ${name}="${String(value).replace(/"/g, '&quot;')}"`)
-            .join('');
+    let i = 0;
+    const length = html.length;
 
-        // Check if it's a self-closing tag
-        const selfClosingTags = ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'];
-        const isSelfClosing = selfClosingTags.includes(tagName);
+    while (i < length) {
+      const nextTagStart = html.indexOf('<', i);
 
-        if (isSelfClosing) {
-            return `<${tagName}${attrs} />`;
-        } else {
-            // Generate innerHTML directly without calling element.innerHTML to avoid recursion
-            let childHTML = '';
-            for (const child of element._childNodesInternal || []) {
-                if (child.nodeType === TEXT_NODE) {
-                    childHTML += (child as any)._nodeValue || '';
-                } else if (child.nodeType === ELEMENT_NODE) {
-                    childHTML += this.generateChildElementHTML(child as any);
-                } else if (child.nodeType === 8) { // COMMENT_NODE
-                    childHTML += `<!--${(child as any).textContent || ''}-->`;
-                }
-            }
-            return `<${tagName}${attrs}>${childHTML}</${tagName}>`;
+      // Handle text content before next tag
+      if (nextTagStart === -1) {
+        let text = html.substring(i).trim();
+        if (text) {
+          text = this.fixBrokenClosingTags(text);
+          if (TextBase) targetNode.appendChild(new TextBase(text, this._ownerDocument));
         }
-    }
-
-    /**
-     * Improved HTML parser for innerHTML using a stack-based approach
-     */
-    private parseAndAppendHTML(html: string): void {
-        const ElementFactory = require('../../factory/ElementFactory').ElementFactory;
-
-        let i = 0;
-        const length = html.length;
-
-        while (i < length) {
-            const nextTagStart = html.indexOf('<', i);
-
-            // Handle text content before next tag
-            if (nextTagStart === -1) {
-                // No more tags, rest is text
-                let text = html.substring(i).trim();
-                if (text) {
-                    // Fix broken closing tags (e.g., "/div>" -> "</div>")
-                    text = this.fixBrokenClosingTags(text);
-                    const { TextBase } = require('../TextBase');
-                    const textNode = new TextBase(text, this._ownerDocument);
-                    this.appendChild(textNode);
-                }
-                break;
-            } else if (nextTagStart > i) {
-                // Text content before the tag
-                let text = html.substring(i, nextTagStart).trim();
-                if (text) {
-                    // Fix broken closing tags (e.g., "/div>" -> "</div>")
-                    text = this.fixBrokenClosingTags(text);
-                    const { TextBase } = require('../TextBase');
-                    const textNode = new TextBase(text, this._ownerDocument);
-                    this.appendChild(textNode);
-                }
-            }
-
-            i = nextTagStart;
-
-            // Parse the tag - find the real tag end, considering quoted attributes
-            const tagEnd = this.findTagEnd(html, i);
-            if (tagEnd === -1) break;
-
-            const tagContent = html.substring(i + 1, tagEnd);
-
-            // Handle comments
-            if (tagContent.startsWith('!--')) {
-                const commentEnd = html.indexOf('-->', i);
-                if (commentEnd !== -1) {
-                    const commentContent = html.substring(i + 4, commentEnd);
-                    const { Comment } = require('../Comment');
-                    const commentNode = new Comment(commentContent, this._ownerDocument);
-                    this.appendChild(commentNode);
-                    i = commentEnd + 3;
-                    continue;
-                }
-            }
-
-            // Handle self-closing tags
-            if (tagContent.endsWith('/')) {
-                const parts = tagContent.slice(0, -1).trim().split(/\s+/);
-                const tagName = parts[0];
-                const attributeString = tagContent.slice(tagName.length, -1).trim();
-
-                const element = ElementFactory.createElement(tagName, this._ownerDocument);
-                this.parseAttributes(element, attributeString);
-                this.appendChild(element);
-                i = tagEnd + 1;
-                continue;
-            }
-
-            // Handle closing tags - if they don't have matching opening tags, treat as text
-            if (tagContent.startsWith('/')) {
-                // For now, treat unmatched closing tags as text content
-                const closingTagText = `<${tagContent}>`;
-                const { TextBase } = require('../TextBase');
-                const textNode = new TextBase(closingTagText, this._ownerDocument);
-                this.appendChild(textNode);
-                i = tagEnd + 1;
-                continue;
-            }
-
-            // Handle opening tags
-            const parts = tagContent.split(/\s+/);
-            const tagName = parts[0];
-            const attributeString = tagContent.slice(tagName.length).trim();
-
-            // Special handling for style and script tags
-            if (tagName === 'style' || tagName === 'script') {
-                const closingTag = `</${tagName}>`;
-                const closingTagIndex = html.indexOf(closingTag, tagEnd + 1);
-
-                if (closingTagIndex !== -1) {
-                    const element = ElementFactory.createElement(tagName, this._ownerDocument);
-                    this.parseAttributes(element, attributeString);
-
-                    const content = html.substring(tagEnd + 1, closingTagIndex);
-                    if (content) {
-                        const { TextBase } = require('../TextBase');
-                        const textNode = new TextBase(content, this._ownerDocument);
-                        element.appendChild(textNode);
-                    }
-
-                    this.appendChild(element);
-                    i = closingTagIndex + closingTag.length;
-                    continue;
-                }
-            }
-
-            // Handle regular opening tags with content
-            const closingTag = `</${tagName}>`;
-            const closingTagIndex = this.findMatchingClosingTag(html, tagName, tagEnd + 1);
-
-            if (closingTagIndex !== -1) {
-                const element = ElementFactory.createElement(tagName, this._ownerDocument);
-                this.parseAttributes(element, attributeString);
-
-                const content = html.substring(tagEnd + 1, closingTagIndex);
-                if (content.trim()) {
-                    element.innerHTML = content;
-                }
-
-                this.appendChild(element);
-                i = closingTagIndex + closingTag.length;
-            } else {
-                // No matching closing tag found, treat as self-closing
-                const element = ElementFactory.createElement(tagName, this._ownerDocument);
-                this.parseAttributes(element, attributeString);
-                this.appendChild(element);
-                i = tagEnd + 1;
-            }
+        break;
+      } else if (nextTagStart > i) {
+        let text = html.substring(i, nextTagStart).trim();
+        if (text) {
+          text = this.fixBrokenClosingTags(text);
+          if (TextBase) targetNode.appendChild(new TextBase(text, this._ownerDocument));
         }
-    }
-
-    /**
-     * Find the real end of a tag, considering quoted attributes
-     */
-    private findTagEnd(html: string, startIndex: number): number {
-        let i = startIndex + 1; // Skip the '<'
-        let inQuotes = false;
-        let quoteChar = '';
-
-        while (i < html.length) {
-            const char = html[i];
-
-            if (!inQuotes) {
-                if (char === '"' || char === "'") {
-                    inQuotes = true;
-                    quoteChar = char;
-                } else if (char === '>') {
-                    return i;
-                }
-            } else {
-                if (char === quoteChar) {
-                    inQuotes = false;
-                    quoteChar = '';
-                }
-            }
-
-            i++;
+      }
+
+      i = nextTagStart;
+      const tagEnd = this.findTagEnd(html, i);
+      if (tagEnd === -1) break;
+
+      const tagContent = html.substring(i + 1, tagEnd);
+
+      // Handle comments
+      if (tagContent.startsWith('!--')) {
+        const commentEnd = html.indexOf('-->', i);
+        if (commentEnd !== -1) {
+          const commentContent = html.substring(i + 4, commentEnd);
+          if (Comment) targetNode.appendChild(new Comment(commentContent, this._ownerDocument));
+          i = commentEnd + 3;
+          continue;
         }
-
-        return -1; // No closing '>' found
-    }
-
-    /**
-     * Fix broken closing tags in text content
-     * Converts patterns like "/div>" to "</div>"
-     */
-    private fixBrokenClosingTags(text: string): string {
-        // Pattern to match broken closing tags: /tagname>
-        return text.replace(/\/(\w+)>/g, '</$1>');
-    }
-
-    /**
-     * Find the matching closing tag, accounting for nested tags of the same type
-     */
-    private findMatchingClosingTag(html: string, tagName: string, startIndex: number): number {
-        const openTag = `<${tagName}`;
-        const closeTag = `</${tagName}>`;
-        let depth = 1;
-        let i = startIndex;
-
-        while (i < html.length && depth > 0) {
-            const nextOpen = html.indexOf(openTag, i);
-            const nextClose = html.indexOf(closeTag, i);
-
-            if (nextClose === -1) {
-                return -1; // No closing tag found
-            }
-
-            if (nextOpen !== -1 && nextOpen < nextClose) {
-                // Found another opening tag before the closing tag
-                // Make sure it's a complete tag (not just a substring)
-                const afterTag = html.charAt(nextOpen + openTag.length);
-                if (afterTag === ' ' || afterTag === '>' || afterTag === '/') {
-                    depth++;
-                }
-                i = nextOpen + openTag.length;
-            } else {
-                // Found a closing tag
-                depth--;
-                if (depth === 0) {
-                    return nextClose;
-                }
-                i = nextClose + closeTag.length;
-            }
+      }
+
+      // Handle self-closing tags
+      if (tagContent.endsWith('/')) {
+        const parts = tagContent.slice(0, -1).trim().split(/\s+/);
+        const tagName = parts[0];
+        const attributeString = tagContent.slice(tagName.length, -1).trim();
+        const element = ElementFactory.createElement(tagName, this._ownerDocument);
+        this.parseAttributes(element, attributeString);
+        targetNode.appendChild(element);
+        i = tagEnd + 1;
+        continue;
+      }
+
+      // Handle closing tags
+      if (tagContent.startsWith('/')) {
+        const closingTagText = `<${tagContent}>`;
+        if (TextBase) targetNode.appendChild(new TextBase(closingTagText, this._ownerDocument));
+        i = tagEnd + 1;
+        continue;
+      }
+
+      // Handle opening tags
+      const parts = tagContent.split(/\s+/);
+      const tagName = parts[0];
+      const attributeString = tagContent.slice(tagName.length).trim();
+
+      // Special handling for style and script tags
+      if (tagName === 'style' || tagName === 'script') {
+        const closingTag = `</${tagName}>`;
+        const closingTagIndex = html.indexOf(closingTag, tagEnd + 1);
+
+        if (closingTagIndex !== -1) {
+          const element = ElementFactory.createElement(tagName, this._ownerDocument);
+          this.parseAttributes(element, attributeString);
+          const content = html.substring(tagEnd + 1, closingTagIndex);
+          if (content && TextBase) {
+            element.appendChild(new TextBase(content, this._ownerDocument));
+          }
+          targetNode.appendChild(element);
+          i = closingTagIndex + closingTag.length;
+          continue;
         }
+      }
 
-        return -1;
-    }
-
-    /**
-     * Parse attributes from attribute string
-     */
-    private parseAttributes(element: any, attributeString: string): void {
-        // Improved attribute parsing that handles complex JavaScript expressions
-        let position = 0;
-        const length = attributeString.length;
+      // Handle regular opening tags with content
+      const closingTagIndex = this.findMatchingClosingTag(html, tagName, tagEnd + 1);
 
-        while (position < length) {
-            // Skip whitespace
-            while (position < length && /\s/.test(attributeString[position])) {
-                position++;
-            }
-
-            if (position >= length) break;
-
-            // Find attribute name
-            const nameStart = position;
-            while (position < length && /[\w:-]/.test(attributeString[position])) {
-                position++;
-            }
-
-            if (position === nameStart) {
-                // Invalid character, skip it
-                position++;
-                continue;
-            }
-
-            const name = attributeString.substring(nameStart, position);
-
-            // Skip whitespace
-            while (position < length && /\s/.test(attributeString[position])) {
-                position++;
-            }
-
-            let value = '';
-
-            // Check if there's an equals sign
-            if (position < length && attributeString[position] === '=') {
-                position++; // Skip '='
-
-                // Skip whitespace
-                while (position < length && /\s/.test(attributeString[position])) {
-                    position++;
-                }
-
-                if (position < length) {
-                    const quote = attributeString[position];
-
-                    if (quote === '"' || quote === "'") {
-                        // Quoted value - find matching closing quote
-                        position++; // Skip opening quote
-                        const valueStart = position;
-
-                        while (position < length && attributeString[position] !== quote) {
-                            position++;
-                        }
-
-                        value = attributeString.substring(valueStart, position);
-
-                        if (position < length && attributeString[position] === quote) {
-                            position++; // Skip closing quote
-                        }
-                    } else {
-                        // Unquoted value - read until whitespace or end
-                        const valueStart = position;
-                        while (position < length && !/\s/.test(attributeString[position])) {
-                            position++;
-                        }
-                        value = attributeString.substring(valueStart, position);
-                    }
-                }
-            }
-
-            // Decode HTML entities in attribute values
-            value = this.decodeHTMLEntities(value);
-
-            element.setAttribute(name, value);
+      if (closingTagIndex !== -1) {
+        const element = ElementFactory.createElement(tagName, this._ownerDocument);
+        this.parseAttributes(element, attributeString);
+        const content = html.substring(tagEnd + 1, closingTagIndex);
+        if (content.trim()) {
+          element.innerHTML = content;
         }
-    }
-
-    /**
-     * Escape HTML entities in a string to prevent XSS
-     */
-    protected escapeHTMLEntities(str: string): string {
-        const entityMap: { [key: string]: string } = {
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#39;'
-        };
-
-        return str.replace(/[&<>"']/g, (char) => {
-            return entityMap[char] || char;
-        });
-    }
-
-    /**
-     * Decode HTML entities in a string
-     */
-    protected decodeHTMLEntities(str: string): string {
-        const entityMap: { [key: string]: string } = {
-            '&amp;': '&',
-            '&lt;': '<',
-            '&gt;': '>',
-            '&quot;': '"',
-            '&#39;': "'",
-            '&#34;': '"',
-            '&apos;': "'",
-            '&copy;': '©',
-            '&reg;': '®',
-            '&trade;': '™',
-            '&nbsp;': ' ',
-            '&hellip;': '…',
-            '&mdash;': '—',
-            '&ndash;': '–',
-            '&lsquo;': '\u2018',
-            '&rsquo;': '\u2019',
-            '&ldquo;': '"',
-            '&rdquo;': '"'
-        };
-
-        return str.replace(/&[a-zA-Z0-9#]+;/g, (entity) => {
-            // Handle named entities
-            if (entityMap[entity]) {
-                return entityMap[entity];
-            }
-
-            // Handle numeric entities like &#39; &#34;
-            if (entity.startsWith('&#') && entity.endsWith(';')) {
-                const numStr = entity.slice(2, -1);
-                const num = parseInt(numStr, 10);
-                if (!isNaN(num)) {
-                    return String.fromCharCode(num);
-                }
-            }
-
-            // Handle hex entities like &#x27;
-            if (entity.startsWith('&#x') && entity.endsWith(';')) {
-                const hexStr = entity.slice(3, -1);
-                const num = parseInt(hexStr, 16);
-                if (!isNaN(num)) {
-                    return String.fromCharCode(num);
-                }
-            }
-
-            // Return original if not recognized
-            return entity;
-        });
-    }
-
-    get outerHTML(): string {
-        const attrs = Array.from(this._attributes.entries())
-            .map(([name, value]) => value === '' ? ` ${name}` : ` ${name}="${value.replace(/"/g, '&quot;')}"`)
-            .join('');
-
-        // Check if it's a self-closing tag
-        const selfClosingTags = ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'];
-        const isSelfClosing = selfClosingTags.includes(this.tagName.toLowerCase());
-
-        if (isSelfClosing) {
-            return `<${this.tagName.toLowerCase()}${attrs} />`;
-        } else {
-            return `<${this.tagName.toLowerCase()}${attrs}>${this.innerHTML}</${this.tagName.toLowerCase()}>`;
+        targetNode.appendChild(element);
+        i = closingTagIndex + (tagName.length + 3); // </tagName>
+      } else {
+        const element = ElementFactory.createElement(tagName, this._ownerDocument);
+        this.parseAttributes(element, attributeString);
+        targetNode.appendChild(element);
+        i = tagEnd + 1;
+      }
+    }
+  }
+
+  private findTagEnd(html: string, startIndex: number): number {
+    let i = startIndex + 1;
+    let inQuotes = false;
+    let quoteChar = '';
+    while (i < html.length) {
+      const char = html[i];
+      if (!inQuotes) {
+        if (char === '"' || char === "'") {
+          inQuotes = true;
+          quoteChar = char;
+        } else if (char === '>') return i;
+      } else {
+        if (char === quoteChar) {
+          inQuotes = false;
+          quoteChar = '';
         }
-    }
-
-    get namespaceURI(): string | null {
-        return 'http://www.w3.org/1999/xhtml';
-    }
-
-    get prefix(): string | null {
-        return null;
-    }
-
-    // Attribute methods
-    getAttribute(qualifiedName: string): string | null {
-        const value = this._attributes.get(qualifiedName.toLowerCase());
-        return value !== undefined ? value : null;
-    }
-
-    setAttribute(qualifiedName: string, value: string): void {
-        const name = qualifiedName.toLowerCase();
-        this._attributes.set(name, value);
-
-        // Update special properties
-        if (name === 'id') {
-            this._id = value;
-        } else if (name === 'class') {
-            this._className = value;
+      }
+      i++;
+    }
+    return -1;
+  }
+
+  private fixBrokenClosingTags(text: string): string {
+    return text.replace(/\/(\w+)>/g, '</$1>');
+  }
+
+  private findMatchingClosingTag(html: string, tagName: string, startIndex: number): number {
+    const openTag = `<${tagName}`;
+    const closeTag = `</${tagName}>`;
+    let depth = 1;
+    let i = startIndex;
+    while (i < html.length && depth > 0) {
+      const nextOpen = html.indexOf(openTag, i);
+      const nextClose = html.indexOf(closeTag, i);
+      if (nextClose === -1) return -1;
+      if (nextOpen !== -1 && nextOpen < nextClose) {
+        const afterTag = html.charAt(nextOpen + openTag.length);
+        if (afterTag === ' ' || afterTag === '>' || afterTag === '/') depth++;
+        i = nextOpen + openTag.length;
+      } else {
+        depth--;
+        if (depth === 0) return nextClose;
+        i = nextClose + closeTag.length;
+      }
+    }
+    return -1;
+  }
+
+  private parseAttributes(element: any, attributeString: string): void {
+    let position = 0;
+    const length = attributeString.length;
+    while (position < length) {
+      while (position < length && /\s/.test(attributeString[position])) position++;
+      if (position >= length) break;
+      const nameStart = position;
+      while (position < length && /[\w:-]/.test(attributeString[position])) position++;
+      if (position === nameStart) {
+        position++;
+        continue;
+      }
+      const name = attributeString.substring(nameStart, position);
+      while (position < length && /\s/.test(attributeString[position])) position++;
+      let value = '';
+      if (position < length && attributeString[position] === '=') {
+        position++;
+        while (position < length && /\s/.test(attributeString[position])) position++;
+        if (position < length) {
+          const quote = attributeString[position];
+          if (quote === '"' || quote === "'") {
+            position++;
+            const valueStart = position;
+            while (position < length && attributeString[position] !== quote) position++;
+            value = attributeString.substring(valueStart, position);
+            if (position < length && attributeString[position] === quote) position++;
+          } else {
+            const valueStart = position;
+            while (position < length && !/\s/.test(attributeString[position])) position++;
+            value = attributeString.substring(valueStart, position);
+          }
         }
-    }
-
-    removeAttribute(qualifiedName: string): void {
-        const name = qualifiedName.toLowerCase();
-        this._attributes.delete(name);
-
-        // Update special properties
-        if (name === 'id') {
-            this._id = '';
-        } else if (name === 'class') {
-            this._className = '';
+      }
+      element.setAttribute(name, this.decodeHTMLEntities(value));
+    }
+  }
+
+  protected escapeHTMLEntities(str: string): string {
+    const entityMap: any = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    return str.replace(/[&<>"']/g, char => entityMap[char] || char);
+  }
+
+  protected decodeHTMLEntities(str: string): string {
+    const entityMap: any = { '&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"', '&#39;': "'", '&#34;': '"', '&apos;': "'", '&copy;': '©', '&reg;': '®', '&trade;': '™', '&nbsp;': ' ', '&hellip;': '…', '&mdash;': '—', '&ndash;': '–', '&lsquo;': '\u2018', '&rsquo;': '\u2019', '&ldquo;': '"', '&rdquo;': '"' };
+    return str.replace(/&[a-zA-Z0-9#]+;/g, entity => {
+      if (entityMap[entity]) return entityMap[entity];
+      if (entity.startsWith('&#') && entity.endsWith(';')) {
+        const num = parseInt(entity.slice(2, -1), 10);
+        return isNaN(num) ? entity : String.fromCharCode(num);
+      }
+      if (entity.startsWith('&#x') && entity.endsWith(';')) {
+        const num = parseInt(entity.slice(3, -1), 16);
+        return isNaN(num) ? entity : String.fromCharCode(num);
+      }
+      return entity;
+    });
+  }
+
+  get outerHTML(): string {
+    const attrs = Array.from(this._attributes.entries())
+      .map(([name, value]) => (value === '' ? ` ${name}` : ` ${name}="${value.replace(/"/g, '&quot;')}"`))
+      .join('');
+    const selfClosingTags = ['img', 'input', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'];
+    const isSelfClosing = selfClosingTags.includes(this.tagName.toLowerCase());
+    return isSelfClosing ? `<${this.tagName.toLowerCase()}${attrs} />` : `<${this.tagName.toLowerCase()}${attrs}>${this.innerHTML}</${this.tagName.toLowerCase()}>`;
+  }
+
+  get namespaceURI(): string | null {
+    return 'http://www.w3.org/1999/xhtml';
+  }
+  get prefix(): string | null {
+    return null;
+  }
+  getAttribute(qualifiedName: string): string | null {
+    return this._attributes.get(qualifiedName.toLowerCase()) ?? null;
+  }
+  setAttribute(qualifiedName: string, value: string): void {
+    const name = qualifiedName.toLowerCase();
+    this._attributes.set(name, value);
+    if (name === 'id') this._id = value;
+    else if (name === 'class') this._className = value;
+  }
+  removeAttribute(qualifiedName: string): void {
+    const name = qualifiedName.toLowerCase();
+    this._attributes.delete(name);
+    if (name === 'id') this._id = '';
+    else if (name === 'class') this._className = '';
+  }
+  hasAttribute(qualifiedName: string): boolean {
+    return this._attributes.has(qualifiedName.toLowerCase());
+  }
+  closest(selectors: string): any {
+    let element: Element | null = this as any;
+    while (element) {
+      if (element.matches && element.matches(selectors)) return element;
+      element = element.parentElement;
+    }
+    return null;
+  }
+  matches(selectors: string): boolean {
+    return CSSSelector.matches(this as any, selectors);
+  }
+  get attributes(): any {
+    return new (NamedNodeMapImpl as any)(this._attributes);
+  }
+  get clientHeight(): number {
+    return 0;
+  }
+  get clientLeft(): number {
+    return 0;
+  }
+  get clientTop(): number {
+    return 0;
+  }
+  get clientWidth(): number {
+    return 0;
+  }
+  get currentCSSZoom(): number {
+    return 1;
+  }
+  onfullscreenchange: any = null;
+  onfullscreenerror: any = null;
+  get part(): any {
+    return { length: 0, value: '', add: () => {}, remove: () => {}, contains: () => false, toggle: () => false, replace: () => false, item: () => null };
+  }
+  get scrollHeight(): number {
+    return 0;
+  }
+  get scrollLeft(): number {
+    return 0;
+  }
+  set scrollLeft(_: number) {}
+  get scrollTop(): number {
+    return 0;
+  }
+  set scrollTop(_: number) {}
+  get scrollWidth(): number {
+    return 0;
+  }
+  get shadowRoot(): ShadowRoot | null {
+    return this._shadowRoot;
+  }
+  get slot(): string {
+    return this.getAttribute('slot') || '';
+  }
+  set slot(value: string) {
+    this.setAttribute('slot', value);
+  }
+  attachShadow(init: ShadowRootInit): ShadowRoot {
+    if (this._shadowRoot) throw new DOMException('Shadow root already attached', 'NotSupportedError');
+    this._shadowRoot = new ShadowRootBase(this as any, init, this._ownerDocument) as unknown as ShadowRoot;
+    return this._shadowRoot;
+  }
+  checkVisibility(_options?: any): boolean {
+    return true;
+  }
+  computedStyleMap(): any {
+    return new Map();
+  }
+  getAttributeNS(_ns: string | null, localName: string): string | null {
+    return this.getAttribute(localName);
+  }
+  getAttributeNames(): string[] {
+    return Array.from(this._attributes.keys());
+  }
+  getAttributeNode(qualifiedName: string): any {
+    const value = this.getAttribute(qualifiedName);
+    return value !== null ? new AttrImpl(qualifiedName, value) : null;
+  }
+  getAttributeNodeNS(_ns: string | null, localName: string): any {
+    return this.getAttributeNode(localName);
+  }
+  getBoundingClientRect(): any {
+    return { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0, toJSON: () => ({}) };
+  }
+  getClientRects(): any {
+    return { length: 0, item: () => null, [Symbol.iterator]: function* () {} };
+  }
+
+  getElementsByClassName(classNames: string): HTMLCollectionOf<Element> {
+    const result: Element[] = [];
+    const classNameList = classNames.trim().split(/\s+/);
+    const hasAllClasses = (element: Element, classes: string[]): boolean => {
+      const elementClasses = element.className.trim().split(/\s+/);
+      return classes.every(cls => elementClasses.includes(cls));
+    };
+    const traverse = (node: any) => {
+      if (node.nodeType === ELEMENT_NODE && hasAllClasses(node as Element, classNameList)) result.push(node as Element);
+      for (let i = 0; i < node.childNodes.length; i++) traverse(node.childNodes[i]);
+    };
+    for (let i = 0; i < this.childNodes.length; i++) traverse(this.childNodes[i]);
+    // @ts-ignore
+    return new HTMLCollectionOfImp(result);
+  }
+
+  getElementsByTagName(qualifiedName: string): HTMLCollection {
+    const result: Element[] = [];
+    const tagName = qualifiedName.toLowerCase();
+    const isWildcard = tagName === '*';
+    const traverse = (node: any) => {
+      if (node.nodeType === ELEMENT_NODE && (isWildcard || node.localName === tagName)) result.push(node as Element);
+      for (let i = 0; i < node.childNodes.length; i++) traverse(node.childNodes[i]);
+    };
+    for (let i = 0; i < this.childNodes.length; i++) traverse(this.childNodes[i]);
+    // @ts-ignore
+    return new HTMLCollectionImp(result);
+  }
+  getElementsByTagNameNS(_ns: string | null, localName: string): any {
+    return this.getElementsByTagName(localName);
+  }
+  getHTML(_options?: any): string {
+    return this.outerHTML;
+  }
+  hasAttributeNS(_ns: string | null, localName: string): boolean {
+    return this.hasAttribute(localName);
+  }
+  hasAttributes(): boolean {
+    return this._attributes.size > 0;
+  }
+  hasPointerCapture(_id: number): boolean {
+    return false;
+  }
+  insertAdjacentElement(where: InsertPosition, element: Element): Element | null {
+    const position = where.toLowerCase();
+    switch (position) {
+      case 'beforebegin':
+        if (this.parentNode) {
+          this.parentNode.insertBefore(element as any, this as any);
+          return element;
         }
-    }
-
-    hasAttribute(qualifiedName: string): boolean {
-        return this._attributes.has(qualifiedName.toLowerCase());
-    }
-
-    /**
-     * Returns the closest ancestor element (including the element itself) that matches the specified CSS selector.
-     * 
-     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/closest)
-     */
-    closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
-    closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
-    closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
-    closest<E extends Element = Element>(selectors: string): E | null;
-    closest(selectors: string): Element | null {
-        let element: Element | null = this as any;
-
-        while (element) {
-            if (element.matches && element.matches(selectors)) {
-                return element;
-            }
-            element = element.parentElement;
-        }
-
         return null;
-    }
-
-    /**
-     * Returns true if the element would be selected by the specified CSS selector; otherwise, returns false.
-     * 
-     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/matches)
-     */
-    matches(selectors: string): boolean {
-        return CSSSelector.matches(this as any, selectors);
-    }
-
-    // ChildNode methods are inherited from ParentNodeBase -> ChildNodeBase
-
-    // Additional Element properties and methods - Not implemented yet
-
-    get attributes(): NamedNodeMap {
-        return new NamedNodeMapImpl(this._attributes);
-    }
-
-    get clientHeight(): number {
-        throw new Error('Element.clientHeight is not implemented yet');
-    }
-
-    get clientLeft(): number {
-        throw new Error('Element.clientLeft is not implemented yet');
-    }
-
-    get clientTop(): number {
-        throw new Error('Element.clientTop is not implemented yet');
-    }
-
-    get clientWidth(): number {
-        throw new Error('Element.clientWidth is not implemented yet');
-    }
-
-    get currentCSSZoom(): number {
-        throw new Error('Element.currentCSSZoom is not implemented yet');
-    }
-
-    onfullscreenchange: ((this: Element, ev: Event) => any) | null = null;
-    onfullscreenerror: ((this: Element, ev: Event) => any) | null = null;
-
-    get part(): any {
-        throw new Error('Element.part is not implemented yet');
-    }
-
-    get scrollHeight(): number {
-        throw new Error('Element.scrollHeight is not implemented yet');
-    }
-
-    get scrollLeft(): number {
-        throw new Error('Element.scrollLeft is not implemented yet');
-    }
-
-    set scrollLeft(value: number) {
-        throw new Error('Element.scrollLeft setter is not implemented yet');
-    }
-
-    get scrollTop(): number {
-        throw new Error('Element.scrollTop is not implemented yet');
-    }
-
-    set scrollTop(value: number) {
-        throw new Error('Element.scrollTop setter is not implemented yet');
-    }
-
-    get scrollWidth(): number {
-        throw new Error('Element.scrollWidth is not implemented yet');
-    }
-
-    get shadowRoot(): any {
-        throw new Error('Element.shadowRoot is not implemented yet');
-    }
-
-    get slot(): string {
-        throw new Error('Element.slot is not implemented yet');
-    }
-
-    set slot(value: string) {
-        throw new Error('Element.slot setter is not implemented yet');
-    }
-
-    // Methods - Not implemented yet
-
-    attachShadow(init: any): any {
-        throw new Error('Element.attachShadow() is not implemented yet');
-    }
-
-    checkVisibility(options?: any): boolean {
-        throw new Error('Element.checkVisibility() is not implemented yet');
-    }
-
-    computedStyleMap(): any {
-        throw new Error('Element.computedStyleMap() is not implemented yet');
-    }
-
-    getAttributeNS(namespace: string | null, localName: string): string | null {
-        // For simplicity, we'll ignore namespace and use localName
-        return this.getAttribute(localName);
-    }
-
-    getAttributeNames(): string[] {
-        return Array.from(this._attributes.keys());
-    }
-
-    getAttributeNode(qualifiedName: string): Attr | null {
-        const value = this.getAttribute(qualifiedName);
-        if (value !== null) {
-            return new AttrImpl(qualifiedName, value);
+      case 'afterbegin':
+        if (this.firstChild) this.insertBefore(element as any, this.firstChild);
+        else this.appendChild(element as any);
+        return element;
+      case 'beforeend':
+        this.appendChild(element as any);
+        return element;
+      case 'afterend':
+        if (this.parentNode) {
+          if (this.nextSibling) this.parentNode.insertBefore(element as any, this.nextSibling);
+          else this.parentNode.appendChild(element as any);
+          return element;
         }
         return null;
-    }
-
-    getAttributeNodeNS(namespace: string | null, localName: string): Attr | null {
-        // For simplicity, we'll ignore namespace and use localName
-        return this.getAttributeNode(localName);
-    }
-
-    getBoundingClientRect(): DOMRect {
-        return {
-            bottom: 0,
-            height: 0,
-            left: 0,
-            right: 0,
-            top: 0,
-            width: 0,
-            x: 0,
-            y: 0,
-            toJSON: () => ({})
-        };
-    }
-
-    getClientRects(): any {
-        throw new Error('Element.getClientRects() is not implemented yet');
-    }
-
-    getElementsByClassName(classNames: string): HTMLCollection {
-        const result: Element[] = [];
-        const classNameList = classNames.trim().split(/\s+/);
-
-        // Helper function to check if element has all specified classes
-        const hasAllClasses = (element: Element, classes: string[]): boolean => {
-            const elementClasses = element.className.trim().split(/\s+/);
-            return classes.every(cls => elementClasses.includes(cls));
-        };
-
-        // Recursive function to traverse all descendants
-        const traverse = (node: any) => {
-            if (node.nodeType === ELEMENT_NODE) {
-                const element = node as Element;
-                if (hasAllClasses(element, classNameList)) {
-                    result.push(element);
-                }
-            }
-
-            // Traverse children
-            for (let i = 0; i < node.childNodes.length; i++) {
-                traverse(node.childNodes[i]);
-            }
-        };
-
-        // Start traversal from this element's children
-        for (let i = 0; i < this.childNodes.length; i++) {
-            traverse(this.childNodes[i]);
-        }
-
-        return new HTMLCollection(result);
-    }
-
-    getElementsByTagName(qualifiedName: string): HTMLCollection {
-        const result: Element[] = [];
-        const tagName = qualifiedName.toLowerCase();
-        const isWildcard = tagName === '*';
-
-        // Recursive function to traverse all descendants
-        const traverse = (node: any) => {
-            if (node.nodeType === ELEMENT_NODE) {
-                const element = node as Element;
-                if (isWildcard || element.localName === tagName) {
-                    result.push(element);
-                }
-            }
-
-            // Traverse children
-            for (let i = 0; i < node.childNodes.length; i++) {
-                traverse(node.childNodes[i]);
-            }
-        };
-
-        // Start traversal from this element's children
-        for (let i = 0; i < this.childNodes.length; i++) {
-            traverse(this.childNodes[i]);
-        }
-
-        return new HTMLCollection(result);
-    }
-
-    getElementsByTagNameNS(namespace: string | null, localName: string): any {
-        // For simplicity, we'll implement this similar to getElementsByTagName
-        // In a full implementation, namespace handling would be more complex
-        return this.getElementsByTagName(localName);
-    }
-
-    getHTML(options?: any): string {
-        throw new Error('Element.getHTML() is not implemented yet');
-    }
-
-    hasAttributeNS(namespace: string | null, localName: string): boolean {
-        // For simplicity, we'll ignore namespace and use localName
-        return this.hasAttribute(localName);
-    }
-
-    hasAttributes(): boolean {
-        return this._attributes.size > 0;
-    }
-
-    hasPointerCapture(pointerId: number): boolean {
-        throw new Error('Element.hasPointerCapture() is not implemented yet');
-    }
-
-    insertAdjacentElement(where: InsertPosition, element: Element): Element | null {
-        const position = where.toLowerCase();
-
-        switch (position) {
-            case 'beforebegin':
-                // Insert before this element
-                if (this.parentNode) {
-                    this.parentNode.insertBefore(element as any, this as any);
-                    return element;
-                }
-                return null;
-
-            case 'afterbegin':
-                // Insert as first child of this element
-                if (this.firstChild) {
-                    this.insertBefore(element as any, this.firstChild);
-                } else {
-                    this.appendChild(element as any);
-                }
-                return element;
-
-            case 'beforeend':
-                // Insert as last child of this element
-                this.appendChild(element as any);
-                return element;
-
-            case 'afterend':
-                // Insert after this element
-                if (this.parentNode) {
-                    if (this.nextSibling) {
-                        this.parentNode.insertBefore(element as any, this.nextSibling);
-                    } else {
-                        this.parentNode.appendChild(element as any);
-                    }
-                    return element;
-                }
-                return null;
-
-            default:
-                throw new DOMException(`Invalid position: ${where}`, 'SyntaxError');
+      default:
+        throw new DOMException(`Invalid position: ${where}`, 'SyntaxError');
+    }
+  }
+  insertAdjacentHTML(position: InsertPosition, html: string): void {
+    const pos = position.toLowerCase();
+    const tempDiv = this._ownerDocument.createElement('div');
+    tempDiv.innerHTML = html;
+    const fragment = this._ownerDocument.createDocumentFragment();
+    while (tempDiv.firstChild) fragment.appendChild(tempDiv.firstChild);
+    switch (pos) {
+      case 'beforebegin':
+        if (this.parentNode) this.parentNode.insertBefore(fragment, this as any);
+        break;
+      case 'afterbegin':
+        if (this.firstChild) this.insertBefore(fragment, this.firstChild);
+        else this.appendChild(fragment);
+        break;
+      case 'beforeend':
+        this.appendChild(fragment);
+        break;
+      case 'afterend':
+        if (this.parentNode) {
+          if (this.nextSibling) this.parentNode.insertBefore(fragment, this.nextSibling);
+          else this.parentNode.appendChild(fragment);
         }
-    }
-
-    insertAdjacentHTML(position: InsertPosition, html: string): void {
-        const pos = position.toLowerCase();
-
-        // Parse HTML string into elements
-        const tempDiv = this._ownerDocument.createElement('div');
-        tempDiv.innerHTML = html;
-
-        // Move all parsed nodes to the target position
-        const fragment = this._ownerDocument.createDocumentFragment();
-        while (tempDiv.firstChild) {
-            fragment.appendChild(tempDiv.firstChild);
+        break;
+      default:
+        throw new DOMException(`Invalid position: ${position}`, 'SyntaxError');
+    }
+  }
+  insertAdjacentText(where: InsertPosition, data: string): void {
+    const position = where.toLowerCase();
+    const textNode = this._ownerDocument.createTextNode(data);
+    switch (position) {
+      case 'beforebegin':
+        if (this.parentNode) this.parentNode.insertBefore(textNode, this as any);
+        break;
+      case 'afterbegin':
+        if (this.firstChild) this.insertBefore(textNode, this.firstChild);
+        else this.appendChild(textNode);
+        break;
+      case 'beforeend':
+        this.appendChild(textNode);
+        break;
+      case 'afterend':
+        if (this.parentNode) {
+          if (this.nextSibling) this.parentNode.insertBefore(textNode, this.nextSibling);
+          else this.parentNode.appendChild(textNode);
         }
-
-        switch (pos) {
-            case 'beforebegin':
-                if (this.parentNode) {
-                    this.parentNode.insertBefore(fragment, this as any);
-                }
-                break;
-
-            case 'afterbegin':
-                if (this.firstChild) {
-                    this.insertBefore(fragment, this.firstChild);
-                } else {
-                    this.appendChild(fragment);
-                }
-                break;
-
-            case 'beforeend':
-                this.appendChild(fragment);
-                break;
-
-            case 'afterend':
-                if (this.parentNode) {
-                    if (this.nextSibling) {
-                        this.parentNode.insertBefore(fragment, this.nextSibling);
-                    } else {
-                        this.parentNode.appendChild(fragment);
-                    }
-                }
-                break;
-
-            default:
-                throw new DOMException(`Invalid position: ${position}`, 'SyntaxError');
-        }
-    }
-
-    insertAdjacentText(where: InsertPosition, data: string): void {
-        const position = where.toLowerCase();
-
-        // Create text node
-        const textNode = this._ownerDocument.createTextNode(data);
-
-        switch (position) {
-            case 'beforebegin':
-                if (this.parentNode) {
-                    this.parentNode.insertBefore(textNode, this as any);
-                }
-                break;
-
-            case 'afterbegin':
-                if (this.firstChild) {
-                    this.insertBefore(textNode, this.firstChild);
-                } else {
-                    this.appendChild(textNode);
-                }
-                break;
-
-            case 'beforeend':
-                this.appendChild(textNode);
-                break;
-
-            case 'afterend':
-                if (this.parentNode) {
-                    if (this.nextSibling) {
-                        this.parentNode.insertBefore(textNode, this.nextSibling);
-                    } else {
-                        this.parentNode.appendChild(textNode);
-                    }
-                }
-                break;
-
-            default:
-                throw new DOMException(`Invalid position: ${where}`, 'SyntaxError');
-        }
-    }
-
-    releasePointerCapture(pointerId: number): void {
-        // throw new Error('Element.releasePointerCapture() is not implemented yet');
-    }
-
-    removeAttributeNS(namespace: string | null, localName: string): void {
-        // For simplicity, we'll ignore namespace and use localName
-        this.removeAttribute(localName);
-    }
-
-    removeAttributeNode(attr: Attr): Attr {
-        const oldValue = this.getAttribute(attr.name);
-        if (oldValue !== null) {
-            this.removeAttribute(attr.name);
-            return new AttrImpl(attr.name, oldValue);
-        }
-        throw new DOMException('The attribute node is not an attribute of this element', 'NotFoundError');
-    }
-
-    requestFullscreen(options?: any): Promise<void> {
-        throw new Error('Element.requestFullscreen() is not implemented yet');
-    }
-
-    requestPointerLock(options?: any): Promise<void> {
-        throw new Error('Element.requestPointerLock() is not implemented yet');
-    }
-
-    scroll(options?: any): void;
-    scroll(x: number, y: number): void;
-    scroll(optionsOrX?: any, y?: number): void {
-        // throw new Error('Element.scroll() is not implemented yet');
-    }
-
-    scrollBy(options?: any): void;
-    scrollBy(x: number, y: number): void;
-    scrollBy(optionsOrX?: any, y?: number): void {
-        // throw new Error('Element.scrollBy() is not implemented yet');
-    }
-
-    scrollIntoView(arg?: boolean | any): void {
-        // throw new Error('Element.scrollIntoView() is not implemented yet');
-    }
-
-    scrollTo(options?: any): void;
-    scrollTo(x: number, y: number): void;
-    scrollTo(optionsOrX?: any, y?: number): void {
-        // throw new Error('Element.scrollTo() is not implemented yet');
-    }
-
-    setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void {
-        // For simplicity, we'll ignore namespace and use qualifiedName
-        this.setAttribute(qualifiedName, value);
-    }
-
-    setAttributeNode(attr: Attr): Attr | null {
-        const oldAttr = this.getAttributeNode(attr.name);
-        this.setAttribute(attr.name, attr.value);
-        return oldAttr;
-    }
-
-    setAttributeNodeNS(attr: Attr): Attr | null {
-        // For simplicity, we'll ignore namespace
-        return this.setAttributeNode(attr);
-    }
-
-    setHTMLUnsafe(html: string): void {
-        // throw new Error('Element.setHTMLUnsafe() is not implemented yet');
-    }
-
-    setPointerCapture(pointerId: number): void {
-        // throw new Error('Element.setPointerCapture() is not implemented yet');
-    }
-
-    toggleAttribute(qualifiedName: string, force?: boolean): boolean {
-        const hasAttr = this.hasAttribute(qualifiedName);
-
-        if (force === true || (force === undefined && !hasAttr)) {
-            this.setAttribute(qualifiedName, '');
-            return true;
-        } else if (force === false || (force === undefined && hasAttr)) {
-            this.removeAttribute(qualifiedName);
-            return false;
-        }
-
-        return hasAttr;
-    }
-
-    webkitMatchesSelector(selectors: string): boolean {
-        // throw new Error('Element.webkitMatchesSelector() is not implemented yet');
-        return false;
-    }
-
-    // EventTarget methods - Not implemented yet
-    addEventListener(type: string, listener: any, options?: any): void {
-        // throw new Error('Element.addEventListener() is not implemented yet');
-    }
-
-    removeEventListener(type: string, listener: any, options?: any): void {
-        // throw new Error('Element.removeEventListener() is not implemented yet');
-    }
-
-    dispatchEvent(event: any): boolean {
-        // throw new Error('Element.dispatchEvent() is not implemented yet');
-        return true;
-    }
-
-    cloneNode(deep?: boolean): ElementBase {
-        // Use ElementFactory to create the correct element type
-        const clone = ElementFactory.createElement(this.tagName, this._ownerDocument);
-
-        // Copy attributes
-        for (const [name, value] of this._attributes) {
-            clone.setAttribute(name, value);
-        }
-
-        // Copy children if deep clone
-        if (deep) {
-            for (const child of this._childNodesInternal) {
-                if (child && 'cloneNode' in child) {
-                    clone.appendChild((child as any).cloneNode(true));
-                }
-            }
-        }
-
-        return clone;
-    }
+        break;
+      default:
+        throw new DOMException(`Invalid position: ${where}`, 'SyntaxError');
+    }
+  }
+  releasePointerCapture(_id: number): void {}
+  removeAttributeNS(_ns: string | null, localName: string): void {
+    this.removeAttribute(localName);
+  }
+  removeAttributeNode(attr: any): any {
+    const oldValue = this.getAttribute(attr.name);
+    if (oldValue !== null) {
+      this.removeAttribute(attr.name);
+      return new AttrImpl(attr.name, oldValue);
+    }
+    throw new DOMException('The attribute node is not an attribute of this element', 'NotFoundError');
+  }
+  requestFullscreen(_opt?: any): Promise<void> {
+    return Promise.resolve();
+  }
+  requestPointerLock(_opt?: any): Promise<void> {
+    return Promise.resolve();
+  }
+  scroll(_x?: any, _y?: any): void {}
+  scrollBy(_x?: any, _y?: any): void {}
+  scrollIntoView(_arg?: any): void {}
+  scrollTo(_x?: any, _y?: any): void {}
+  setAttributeNS(_ns: string | null, qualifiedName: string, value: string): void {
+    this.setAttribute(qualifiedName, value);
+  }
+  setAttributeNode(attr: any): any {
+    const oldAttr = this.getAttributeNode(attr.name);
+    this.setAttribute(attr.name, attr.value);
+    return oldAttr;
+  }
+  setAttributeNodeNS(attr: any): any {
+    return this.setAttributeNode(attr);
+  }
+  setHTMLUnsafe(html: string): void {
+    this.innerHTML = html;
+  }
+  setPointerCapture(_id: number): void {}
+  toggleAttribute(qualifiedName: string, force?: boolean): boolean {
+    const hasAttr = this.hasAttribute(qualifiedName);
+    if (force === true || (force === undefined && !hasAttr)) {
+      this.setAttribute(qualifiedName, '');
+      return true;
+    } else if (force === false || (force === undefined && hasAttr)) {
+      this.removeAttribute(qualifiedName);
+      return false;
+    }
+    return hasAttr;
+  }
+  webkitMatchesSelector(selectors: string): boolean {
+    return this.matches(selectors);
+  }
+  addEventListener(type: string, listener: any, options?: any): void {}
+  removeEventListener(type: string, listener: any, options?: any): void {}
+  dispatchEvent(_event: any): boolean {
+    return true;
+  }
+  cloneNode(deep?: boolean): any {
+    const { ElementFactory } = ElementBase.dependencies;
+    const clone = ElementFactory.createElement(this.tagName, this._ownerDocument);
+    for (const [name, value] of this._attributes) clone.setAttribute(name, value);
+    if (deep) for (const child of this._childNodesInternal) if (child && 'cloneNode' in child) clone.appendChild((child as any).cloneNode(true));
+    return clone;
+  }
 }
 
-// DOMTokenList implementation
+//@ts-ignore
 class DOMTokenListImpl implements DOMTokenList {
-    constructor(private element: ElementBase) { }
-
-    get length(): number {
-        return this.element.className.split(/\s+/).filter(c => c.length > 0).length;
-    }
-
-    get value(): string {
-        return this.element.className;
-    }
-
-    set value(value: string) {
-        this.element.className = value;
-    }
-
-    add(...tokens: string[]): void {
-        const classes = new Set(this.element.className.split(/\s+/).filter(c => c.length > 0));
-        for (const token of tokens) {
-            classes.add(token);
-        }
-        this.element.className = Array.from(classes).join(' ');
-    }
-
-    remove(...tokens: string[]): void {
-        const classes = new Set(this.element.className.split(/\s+/).filter(c => c.length > 0));
-        for (const token of tokens) {
-            classes.delete(token);
-        }
-        this.element.className = Array.from(classes).join(' ');
-    }
-
-    contains(token: string): boolean {
-        return this.element.className.split(/\s+/).includes(token);
-    }
-
-    toggle(token: string, force?: boolean): boolean {
-        const hasToken = this.contains(token);
-
-        if (force === true || (force === undefined && !hasToken)) {
-            this.add(token);
-            return true;
-        } else {
-            this.remove(token);
-            return false;
-        }
-    }
-
-    replace(oldToken: string, newToken: string): boolean {
-        if (this.contains(oldToken)) {
-            this.remove(oldToken);
-            this.add(newToken);
-            return true;
-        }
-        return false;
-    }
-
-    item(index: number): string | null {
-        const classes = this.element.className.split(/\s+/).filter(c => c.length > 0);
-        return index >= 0 && index < classes.length ? classes[index] : null;
-    }
-
-    [index: number]: string;
+  constructor(private element: ElementBase) {}
+
+  get length(): number {
+    return this.element.className.split(/\s+/).filter(c => c.length > 0).length;
+  }
+  get value(): string {
+    return this.element.className;
+  }
+  set value(value: string) {
+    this.element.className = value;
+  }
+  add(...tokens: string[]): void {
+    const classes = new Set(this.element.className.split(/\s+/).filter(c => c.length > 0));
+    tokens.forEach(t => classes.add(t));
+    this.element.className = Array.from(classes).join(' ');
+  }
+  remove(...tokens: string[]): void {
+    const classes = new Set(this.element.className.split(/\s+/).filter(c => c.length > 0));
+    tokens.forEach(t => classes.delete(t));
+    this.element.className = Array.from(classes).join(' ');
+  }
+  contains(token: string): boolean {
+    return this.element.className.split(/\s+/).includes(token);
+  }
+  toggle(token: string, force?: boolean): boolean {
+    const hasToken = this.contains(token);
+    if (force === true || (force === undefined && !hasToken)) {
+      this.add(token);
+      return true;
+    } else {
+      this.remove(token);
+      return false;
+    }
+  }
+  replace(oldToken: string, newToken: string): boolean {
+    if (this.contains(oldToken)) {
+      this.remove(oldToken);
+      this.add(newToken);
+      return true;
+    }
+    return false;
+  }
+  item(index: number): string | null {
+    const classes = this.element.className.split(/\s+/).filter(c => c.length > 0);
+    return index >= 0 && index < classes.length ? classes[index] : null;
+  }
+  [index: number]: string;
 }
 
-
-
-// Attr implementation
+//@ts-ignore
 class AttrImpl extends NodeBase implements Attr {
-    public ownerElement: Element | null = null;
-    public namespaceURI: string | null = null;
-    public prefix: string | null = null;
-    public specified: boolean = true;
-
-    constructor(public name: string, public value: string) {
-        super(ATTRIBUTE_NODE, name);
-    }
-
-    get localName(): string {
-        return this.name;
-    }
+  public ownerElement: Element | null = null;
+  public namespaceURI: string | null = null;
+  public prefix: string | null = null;
+  public specified: boolean = true;
+  constructor(
+    public name: string,
+    public value: string
+  ) {
+    super(ATTRIBUTE_NODE, name);
+  }
+  get localName(): string {
+    return this.name;
+  }
 }
 
-// NamedNodeMap implementation
 class NamedNodeMapImpl implements NamedNodeMap {
-    constructor(private attributes: Map<string, string>) { }
-
-    get length(): number {
-        return this.attributes.size;
-    }
-
-    getNamedItem(qualifiedName: string): Attr | null {
-        const value = this.attributes.get(qualifiedName.toLowerCase());
-        return value !== undefined ? new AttrImpl(qualifiedName, value) : null;
-    }
-
-    getNamedItemNS(namespace: string | null, localName: string): Attr | null {
-        // For simplicity, ignore namespace
-        return this.getNamedItem(localName);
-    }
-
-    item(index: number): Attr | null {
-        const keys = Array.from(this.attributes.keys());
-        if (index >= 0 && index < keys.length) {
-            const key = keys[index];
-            const value = this.attributes.get(key)!;
-            return new AttrImpl(key, value);
-        }
-        return null;
-    }
-
-    removeNamedItem(qualifiedName: string): Attr {
-        const value = this.attributes.get(qualifiedName.toLowerCase());
-        if (value !== undefined) {
-            this.attributes.delete(qualifiedName.toLowerCase());
-            return new AttrImpl(qualifiedName, value);
-        }
-        throw new DOMException('The attribute is not found', 'NotFoundError');
-    }
-
-    removeNamedItemNS(namespace: string | null, localName: string): Attr {
-        // For simplicity, ignore namespace
-        return this.removeNamedItem(localName);
-    }
-
-    setNamedItem(attr: Attr): Attr | null {
-        const oldValue = this.attributes.get(attr.name.toLowerCase());
-        this.attributes.set(attr.name.toLowerCase(), attr.value);
-        return oldValue !== undefined ? new AttrImpl(attr.name, oldValue) : null;
-    }
-
-    setNamedItemNS(attr: Attr): Attr | null {
-        // For simplicity, ignore namespace
-        return this.setNamedItem(attr);
-    }
-
-    // Iterator implementation
-    *[Symbol.iterator](): IterableIterator<Attr> {
-        const keys = Array.from(this.attributes.keys());
-        for (const key of keys) {
-            const value = this.attributes.get(key)!;
-            yield new AttrImpl(key, value);
-        }
-    }
-
-    // Additional iterator methods for compatibility
-    keys(): IterableIterator<string> {
-        return this.attributes.keys();
-    }
-
-    values(): IterableIterator<Attr> {
-        const self = this;
-        return (function* () {
-            for (const [key, value] of self.attributes) {
-                yield new AttrImpl(key, value);
-            }
-        })();
-    }
-
-    entries(): IterableIterator<[string, Attr]> {
-        const self = this;
-        return (function* () {
-            for (const [key, value] of self.attributes) {
-                yield [key, new AttrImpl(key, value)] as [string, Attr];
-            }
-        })();
-    }
-
-    // forEach method for compatibility
-    forEach(callback: (attr: Attr, index: number, map: NamedNodeMap) => void, thisArg?: any): void {
-        const keys = Array.from(this.attributes.keys());
-        keys.forEach((key, index) => {
-            const value = this.attributes.get(key)!;
-            const attr = new AttrImpl(key, value);
-            callback.call(thisArg, attr, index, this);
-        });
-    }
-
-    [index: number]: Attr;
-}
+  constructor(private attributes: Map<string, string>) {}
+  get length(): number {
+    return this.attributes.size;
+  }
+  getNamedItem(qualifiedName: string): any {
+    const value = this.attributes.get(qualifiedName.toLowerCase());
+    return value !== undefined ? new AttrImpl(qualifiedName, value) : null;
+  }
+  getNamedItemNS(_ns: string | null, localName: string): any {
+    return this.getNamedItem(localName);
+  }
+  item(index: number): any {
+    const keys = Array.from(this.attributes.keys());
+    if (index >= 0 && index < keys.length) return new AttrImpl(keys[index], this.attributes.get(keys[index])!);
+    return null;
+  }
+  removeNamedItem(qualifiedName: string): any {
+    const value = this.attributes.get(qualifiedName.toLowerCase());
+    if (value !== undefined) {
+      this.attributes.delete(qualifiedName.toLowerCase());
+      return new AttrImpl(qualifiedName, value);
+    }
+    throw new DOMException('The attribute is not found', 'NotFoundError');
+  }
+  removeNamedItemNS(_ns: string | null, localName: string): any {
+    return this.removeNamedItem(localName);
+  }
+  setNamedItem(attr: any): any {
+    const oldValue = this.attributes.get(attr.name.toLowerCase());
+    this.attributes.set(attr.name.toLowerCase(), attr.value);
+    return oldValue !== undefined ? new AttrImpl(attr.name, oldValue) : null;
+  }
+  setNamedItemNS(attr: any): any {
+    return this.setNamedItem(attr);
+  }
+  *[Symbol.iterator](): any {
+    for (const [key, value] of this.attributes) yield new AttrImpl(key, value);
+  }
+  keys(): any {
+    return this.attributes.keys();
+  }
+  values(): any {
+    const self = this;
+    return (function* () {
+      for (const [key, value] of self.attributes) yield new AttrImpl(key, value);
+    })();
+  }
+  entries(): any {
+    const self = this;
+    return (function* () {
+      for (const [key, value] of self.attributes) yield [key, new AttrImpl(key, value)];
+    })();
+  }
+  forEach(callback: any, thisArg?: any): void {
+    const keys = Array.from(this.attributes.keys());
+    keys.forEach((key, index) => callback.call(thisArg, new AttrImpl(key, this.attributes.get(key)!), index, this));
+  }
+  [index: number]: any;
+}