### cat\src\builder.js

```javascript
/**
 * Builder Module
 * 
 * This module takes the interpreted component parts and assembles them into a Custom Element class.
 */

class Builder {
    /**
     * Build a Custom Element class from the interpreted component parts with optimization:
     * - Build DOM once using a static DocumentFragment.
     * - Initialize variables in the constructor.
     * - Clone and append the fragment in connectedCallback.
     * 
     * @param {Object} component - The interpreted component object.
     * @param {string} component.tagName - The tag name for the custom element.
     * @param {Object} component.script - The interpreted script object.
     * @param {string[]} component.script.variables - Array of variable declarations.
     * @param {string[]} component.script.methods - Array of method definitions.
     * @param {string[]} component.script.calls - Array of function calls.
     * @param {Object} component.script.eventListeners - Object containing event listener registrations.
     * @param {string[]} component.script.eventListeners.connect - Array of event listener initialization statements.
     * @param {string[]} component.script.eventListeners.disconnect - Array of event listener removal statements.
     * @param {string} transformedDOM - The JavaScript code for building the DOM structure.
     * @returns {string} - The assembled Custom Element class as a string.
     */
    static buildCustomElement(component, transformedDOM) {
        const { tagName, script } = component;
        const className = this.kebabToPascalCase(tagName);

        // Initialize variables in the constructor
        const variableAssignments = script.variables.join('\n        ');

        // Event listeners for connect and disconnect
        const connectListeners = script.eventListeners.connect.join('\n        ');
        const disconnectListeners = script.eventListeners.disconnect.join('\n        ');

        // Function calls to execute after DOM is appended
        const functionCalls = script.calls.join('\n        ');

        // Methods of the class
        const methods = script.methods.join('\n\n    ');

        return `
class ${className} extends HTMLElement {
    /**
     * Static DocumentFragment shared across all instances.
     * Built once to optimize memory usage.
     */
    static _masterFragment = (function() {
        const fragment = document.createDocumentFragment();
        // Build the DOM once
        ${transformedDOM}
        return fragment;
    })();

    /**
     * Constructor initializes properties.
     */
    constructor() {
        super();
        // Initialize properties
        ${variableAssignments}
    }

    /**
     * Invoked each time the custom element is appended into a document-connected element.
     */
    connectedCallback() {
        // Clone the master fragment and append to the DOM
        const clonedFragment = ${className}._masterFragment.cloneNode(true);
        this.appendChild(clonedFragment);

        // Initialize event listeners
        ${connectListeners}

        // Execute any additional function calls
        ${functionCalls}
    }

    /**
     * Invoked each time the custom element is disconnected from the document's DOM.
     */
    disconnectedCallback() {
        // Remove event listeners
        ${disconnectListeners}
    }

    ${methods}
}

customElements.define('${tagName}', ${className});
        `.trim();
    }

    /**
     * Convert a kebab-case string to PascalCase.
     * 
     * @param {string} str - The kebab-case string to convert.
     * @returns {string} - The PascalCase version of the input string.
     */
    static kebabToPascalCase(str) {
        return str.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
    }
}

module.exports = Builder;
```

### cat\src\collector.js

```javascript
const fs = require('fs-extra');
const path = require('path');
const glob = require('glob');
const { determineFileType } = require('./typeof');

/**
 * Collect and structure HTML files from the project
 * @param {string} projectRoot - Root directory of the project
 * @returns {Object} - Structured object of HTML files
 */
async function collectHTMLFiles(projectRoot) {
  const htmlFiles = glob.sync('**/*.html', {
    cwd: projectRoot,
    ignore: ['node_modules/**', 'cat/**'],
  });

  const collectedFiles = {};

  for (const file of htmlFiles) {
    const filePath = path.join(projectRoot, file);
    const content = await fs.readFile(filePath, 'utf-8');
    const fileType = determineFileType(file);
    const title = path.basename(file, path.extname(file));

    collectedFiles[file] = {
      title,
      type: fileType,
      body: content, // Start with raw content
    };
  }

  return collectedFiles;
}

module.exports = { collectHTMLFiles };
```

### cat\src\index.js

```javascript
const path = require('path');
const fs = require('fs-extra');
const { collectHTMLFiles } = require('./collector');
const ParsingPipeline = require('./parser');
const Interpreter = require('./interpreter');
const ScriptInterpreter = require('./sinterpreter');
const Builder = require('./builder');
const { transformToJavaScript } = require('./transformer'); // Import transformer

async function initializeCompiler(indexPath) {
    const projectRoot = path.dirname(indexPath);
    const collectedFiles = await collectHTMLFiles(projectRoot);

    const processedFiles = {};
    const scriptInterpreter = new ScriptInterpreter();
    const builtComponents = {};

    for (const [file, fileData] of Object.entries(collectedFiles)) {
        try {
            // Parsing step
            const parsed = ParsingPipeline.parseHTML(fileData.body, file);
            
            // HTML Interpretation step
            const interpreted = {
                ...parsed,
                body: Interpreter.interpretBody(parsed.body)
            };

            // Script Interpretation step
            const scriptInterpreted = interpreted.script 
                ? scriptInterpreter.interpret(interpreted.script)
                : { variables: [], methods: [], calls: [], eventListeners: { connect: [], disconnect: [] } };

            processedFiles[file] = {
                ...interpreted,
                script: scriptInterpreted
            };

            // Transformation step
            const transformedDOM = transformToJavaScript(interpreted.body);

            // Building step
            const builtComponent = Builder.buildCustomElement(processedFiles[file], transformedDOM);
            builtComponents[file] = builtComponent;

            console.log(`\nFile: ${file}`);
            console.log('Type:', interpreted.type);
            console.log('Tag Name:', interpreted.tagName);
            console.log('Parsed body:', JSON.stringify(parsed.body, null, 2));
            console.log('Interpreted body:', JSON.stringify(interpreted.body, null, 2));
            console.log('Transformed DOM:', transformedDOM);
            console.log('Interpreted script:', JSON.stringify(scriptInterpreted, null, 2));
            console.log('Built Component:', builtComponent);
            console.log('Style:', interpreted.style);
        } catch (error) {
            console.error(`Error processing ${file}:`, error.message);
        }
    }

    return {
        async compile() {
            let indexContent = await fs.readFile(indexPath, 'utf-8');
            
            const debugInfo = `
<script>
    console.log('Processed files:', ${JSON.stringify(processedFiles, null, 2)});
    console.log('Built Components:', ${JSON.stringify(builtComponents, null, 2)});
</script>
            `;
            // **Modify this line to inject before </head> instead of </body>**
            indexContent = indexContent.replace('</head>', `${debugInfo}</head>`);

            // Inject built components into the head of the index file
            const componentsScript = `<script>${Object.values(builtComponents).join('\n\n')}</script>`;
            indexContent = indexContent.replace('</head>', `${componentsScript}</head>`);

            return indexContent;
        }
    };
}

module.exports = { initializeCompiler };
```

### cat\src\interpreter.js

```javascript
/**
 * Interpreter Module
 */
const Interpreter = (function() {
  /**
   * Convert custom syntax to JavaScript Template Literals
   * @param {string} content - The content to interpret
   * @returns {string} - The interpreted content
   */
  function interpretContent(content) {
    return content.replace(/\{([^}]+)\}/g, (match, p1) => `\${this.${p1.trim()}}`);
  }

  /**
   * Recursively interpret the parsed body
   * @param {Array} body - The parsed body
   * @returns {Array} - The interpreted body
   */
  function interpretBody(body) {
    return body.map(node => {
      if (node.type === 'tag') {
        return {
          ...node,
          children: interpretBody(node.children)
        };
      } else if (node.type === 'text') {
        return {
          ...node,
          content: interpretContent(node.content)
        };
      }
      return node;
    });
  }

  // Public API
  return {
    interpretBody
  };
})();

module.exports = Interpreter;
```

### cat\src\parser.js

```javascript
const { parseDocument } = require('htmlparser2');
const { determineFileType } = require('./typeof');
const Interpreter = require('./interpreter');

/**
 * Parsing Pipeline Module
 */
const ParsingPipeline = (() => {
  /**
   * Extract wrappers from content using matchAll for better performance and readability
   * @param {string} content - Raw HTML content
   * @returns {Array} - Array of wrapper objects
   */
  const extractWrappers = (content) => {
    const wrapperRegex = /<(\w+(?:-?\w+)*)>([\s\S]*?)<\/\1>/g;
    return Array.from(content.matchAll(wrapperRegex), match => ({
      tag: match[1],
      content: match[2],
    }));
  };


  /**
   * Simplify the DOM structure, removing empty nodes using a recursive approach
   * @param {Array} nodes - Array of DOM nodes
   * @returns {Array} - Simplified array of nodes
   */
  const simplifyDOM = (nodes) =>
    nodes
      .map(node => {
        if (node.type === 'tag') {
          const children = simplifyDOM(node.children);
          const hasAttributes = Object.keys(node.attribs).length > 0;
          if (children.length === 0 && !hasAttributes) return null;
          return {
            type: 'tag',
            name: node.name,
            attributes: node.attribs,
            children,
          };
        }
        if (node.type === 'text') {
          const content = node.data.trim();
          return content ? { type: 'text', content } : null;
        }
        return null;
      })
      .filter(Boolean);


  /**
   * Parse the body content
   * @param {string} bodyContent - The content to parse
   * @returns {Array} - Array of parsed nodes
   */
  const parseBodyContent = (bodyContent) => simplifyDOM(parseDocument(bodyContent, { recognizeSelfClosing: true }).children);


  /**
   * Parse HTML content and extract body, script, and style
   * @param {string} content - Raw HTML content to parse
   * @param {string} fileName - Name of the file being parsed
   * @returns {Object} - Parsed structure with type, body, script, and style
   */
  const parseHTML = (content, fileName) => {
    const wrappers = extractWrappers(content);

    if (wrappers.length > 3) {
      throw new Error(`Invalid structure in ${fileName}. Found ${wrappers.length} wrappers, maximum allowed is 3.`);
    }

    const mainWrappers = wrappers.filter(w => !['script', 'style'].includes(w.tag.toLowerCase()));

    if (mainWrappers.length !== 1) {
      throw new Error(`Invalid structure in ${fileName}. Expected exactly one main wrapper.`);
    }

    const mainWrapper = mainWrappers[0];
    const scriptWrapper = wrappers.find(w => w.tag.toLowerCase() === 'script');
    const styleWrapper = wrappers.find(w => w.tag.toLowerCase() === 'style');

    const script = scriptWrapper ? scriptWrapper.content.trim() : '';
    const style = styleWrapper ? styleWrapper.content.trim() : '';

    const fileType = determineFileType(fileName);
    const body = parseBodyContent(mainWrapper.content);

    return { 
      type: fileType,
      tagName: mainWrapper.tag,
      body,
      script,
      style
    };
  };


  // Public API
  return {
    parseHTML,
  };
})();

module.exports = ParsingPipeline;
```

### cat\src\sinterpreter.js

```javascript
/**
 * ScriptInterpreter Module
 * 
 * This module parses raw JavaScript code related to a component and structures it into a class-friendly format.
 * It organizes global variables, methods, function calls, and event listeners for subsequent compilation steps.
 */

const acorn = require('acorn');
const walk = require('acorn-walk');

/**
 * Class representing a Script Interpreter.
 */
class ScriptInterpreter {
  /**
   * Create a ScriptInterpreter.
   */
  constructor() {
    this.globalVariables = [];
    this.methods = [];
    this.calls = [];
    this.eventListeners = {
      connect: [],
      disconnect: [],
    };
    this.scriptContent = '';
    this.uniqueMethodCounter = 1;
  }

  /**
   * Interpret the provided JavaScript code and extract class components.
   * 
   * @param {string} scriptContent - The raw JavaScript code to interpret.
   * @returns {Object} An object containing extracted global variables, methods, calls, and event listeners.
   * @throws Will throw an error if parsing fails or if a class is detected.
   */
  interpret(scriptContent) {
    this.scriptContent = scriptContent;
    this.globalVariables = [];
    this.methods = [];
    this.calls = [];
    this.eventListeners = {
      connect: [],
      disconnect: [],
    };
    this.uniqueMethodCounter = 1;

    try {
      const ast = acorn.parse(this.scriptContent, {
        ecmaVersion: 'latest',
        sourceType: 'script',
        locations: false,
      });

      // Check for class declarations and expressions
      walk.simple(ast, {
        ClassDeclaration: () => {
          throw new Error('Classes are not supported.');
        },
        ClassExpression: () => {
          throw new Error('Classes are not supported.');
        }
      });

      this.processAst(ast);
      return {
        variables: this.globalVariables,
        methods: this.methods,
        calls: this.calls,
        eventListeners: this.eventListeners,
      };
    } catch (error) {
      throw new Error(`Failed to interpret script: ${error.message}`);
    }
  }

  /**
   * Process the Abstract Syntax Tree (AST) to extract class components.
   * 
   * @param {Object} ast - The AST generated by Acorn.
   */
  processAst(ast) {
    // Only process top-level nodes (global scope)
    ast.body.forEach(node => {
      if (node.type === 'VariableDeclaration') {
        this.processVariableDeclaration(node);
      } else if (node.type === 'FunctionDeclaration') {
        this.processFunctionDeclaration(node);
      } else if (node.type === 'ExpressionStatement') {
        this.processExpressionStatement(node);
      } else if (node.type === 'ImportDeclaration') {
        this.processImportDeclaration(node);
      } else {
        // Ignore other top-level constructs or handle as needed
      }
    });
  }

  /**
   * Process import declarations and treat them as global variables.
   * 
   * @param {Object} node - The ImportDeclaration node.
   */
  processImportDeclaration(node) {
    const code = this.generateCode(node);
    this.globalVariables.push(`${code};`);
  }

  /**
   * Process variable declarations in the global scope.
   * 
   * @param {Object} node - The VariableDeclaration node.
   */
  processVariableDeclaration(node) {
    node.declarations.forEach((decl) => {
      if (decl.init && (decl.init.type === 'ArrowFunctionExpression' || decl.init.type === 'FunctionExpression')) {
        this.processFunctionExpression(decl, node.kind);
      } else {
        this.processGlobalVariable(decl, node.kind);
      }
    });
  }

  /**
   * Process a single global variable declaration.
   * 
   * @param {Object} decl - The VariableDeclarator node.
   * @param {string} kind - The kind of variable declaration (var, let, const).
   */
  processGlobalVariable(decl, kind) {
    const name = decl.id.name;
    const init = decl.init ? this.generateCode(decl.init) : 'undefined';
    // Prefix with 'this.' to assign as a class property
    this.globalVariables.push(`this.${name} = ${init};`);
  }

  /**
   * Process function declarations in the global scope.
   * 
   * @param {Object} node - The FunctionDeclaration node.
   */
  processFunctionDeclaration(node) {
    const name = node.id.name;
    const params = node.params.map(param => this.generateCode(param)).join(', ');
    const body = this.generateCode(node.body).trim();
    this.methods.push(`${name}(${params}) ${body}`);
  }

  /**
   * Process function expressions (including arrow functions) in the global scope as class methods.
   * 
   * @param {Object} decl - The VariableDeclarator node containing the function expression.
   * @param {string} kind - The kind of variable declaration (var, let, const).
   */
  processFunctionExpression(decl, kind) {
    const name = decl.id.name;
    const params = decl.init.params.map(param => this.generateCode(param)).join(', ');
    let methodString = '';

    if (decl.init.type === 'FunctionExpression' || decl.init.type === 'ArrowFunctionExpression') {
      if (decl.init.body.type === 'BlockStatement') {
        const body = this.generateCode(decl.init.body).trim();
        methodString = `${name}(${params}) ${body}`;
      } else {
        // Concise arrow function
        const expression = this.generateCode(decl.init.body).trim();
        methodString = `${name}(${params}) { return ${expression}; }`;
      }
      this.methods.push(methodString);
    }
  }

  /**
   * Process expression statements in the global scope.
   * 
   * @param {Object} node - The ExpressionStatement node.
   */
  processExpressionStatement(node) {
    const expression = node.expression;

    try {
      if (this.isFunctionAssignment(expression)) {
        this.processFunctionAssignment(expression);
      } else if (expression.type === 'CallExpression') {
        if (this.isImmediateFunction(expression)) {
          this.processImmediateFunction(expression);
        } else if (this.isEventListener(expression)) {
          this.processEventListener(expression);
        } else {
          this.processFunctionCall(expression);
        }
      }
    } catch (error) {
      console.error(`Error processing expression statement: ${error.message}`);
    }
  }

  /**
   * Check if an expression is a function assignment (e.g., window.onload = function() {}).
   * 
   * @param {Object} expression - The expression node.
   * @returns {boolean} True if it's a function assignment, false otherwise.
   */
  isFunctionAssignment(expression) {
    return (
      expression.type === 'AssignmentExpression' &&
      (expression.right.type === 'FunctionExpression' || expression.right.type === 'ArrowFunctionExpression')
    );
  }

  /**
   * Process function assignments (e.g., window.onload = function() {}).
   * 
   * @param {Object} expression - The AssignmentExpression node.
   */
  processFunctionAssignment(expression) {
    const left = this.generateCode(expression.left).trim();
    const name = this.generateUniqueMethodName('assignedFunction');
    const params = expression.right.params.map(param => this.generateCode(param)).join(', ');
    let body = '';

    if (expression.right.body.type === 'BlockStatement') {
      body = this.generateCode(expression.right.body).trim();
    } else {
      // Concise arrow function
      const expressionBody = this.generateCode(expression.right.body).trim();
      body = `{ return ${expressionBody}; }`;
    }

    this.methods.push(`${name}(${params}) ${body}`);
    this.calls.push(`${left} = this.${name}.bind(this);`);
  }

  /**
   * Check if a CallExpression node is an event listener.
   * 
   * @param {Object} expression - The CallExpression node.
   * @returns {boolean} True if it's an event listener, false otherwise.
   */
  isEventListener(expression) {
    return (
      expression.callee.type === 'MemberExpression' &&
      expression.callee.property.name === 'addEventListener' &&
      expression.arguments.length >= 2
    );
  }

  /**
   * Process event listeners in the global scope.
   * 
   * @param {Object} expression - The CallExpression node representing the event listener.
   */
  processEventListener(expression) {
    const element = this.generateCode(expression.callee.object).trim();
    const event = this.generateCode(expression.arguments[0]).trim().replace(/^['"]|['"]$/g, '');

    let listener = '';

    if (expression.arguments[1].type === 'FunctionExpression' || expression.arguments[1].type === 'ArrowFunctionExpression') {
      const func = expression.arguments[1];
      const name = this.generateUniqueMethodName('eventListener');
      const params = func.params.map(param => this.generateCode(param)).join(', ');
      let body = '';

      if (func.body.type === 'BlockStatement') {
        body = this.generateCode(func.body).trim();
      } else {
        // Concise arrow function
        const expressionBody = this.generateCode(func.body).trim();
        body = `{ return ${expressionBody}; }`;
      }

      this.methods.push(`${name}(${params}) ${body}`);
      listener = `this.${name}.bind(this)`;
    } else if (expression.arguments[1].type === 'Identifier') {
      // Listener is a named function
      const listenerName = expression.arguments[1].name;
      listener = `this.${listenerName}.bind(this)`;
    } else {
      // Other types (e.g., bound methods)
      listener = this.generateCode(expression.arguments[1]).trim();
    }

    // Attach 'this.' if not already present
    const formattedElement = this.ensureThisPrefix(element);
    
    // Add to 'connect' event listeners
    this.eventListeners.connect.push(`${formattedElement}.addEventListener('${event}', ${listener});`);
    
    // Add corresponding remover to 'disconnect' event listeners
    this.eventListeners.disconnect.push(`${formattedElement}.removeEventListener('${event}', ${listener});`);
  }

  /**
   * Ensures that the given identifier is prefixed with 'this.' if it's not already.
   * 
   * @param {string} identifier - The identifier to check.
   * @returns {string} The identifier with 'this.' prefix if needed.
   */
  ensureThisPrefix(identifier) {
    // If the identifier starts with 'this.', return as is
    if (/^this\./.test(identifier)) {
      return identifier;
    }

    // Otherwise, prefix with 'this.'
    return `this.${identifier}`;
  }

  /**
   * Check if a CallExpression node is an Immediately Invoked Function Expression (IIFE).
   * 
   * @param {Object} expression - The CallExpression node.
   * @returns {boolean} True if it's an IIFE, false otherwise.
   */
  isImmediateFunction(expression) {
    return (
      (expression.callee.type === 'FunctionExpression' || expression.callee.type === 'ArrowFunctionExpression') &&
      // Allow both named and anonymous function expressions
      true
    );
  }

  /**
   * Process Immediately Invoked Function Expressions (IIFE) in the global scope.
   * 
   * @param {Object} expression - The CallExpression node representing the IIFE.
   */
  processImmediateFunction(expression) {
    const name = this.generateUniqueMethodName('immediateFunction');
    let params = '';
    let args = '';
    let body = '';

    if (expression.callee.type === 'FunctionExpression' || expression.callee.type === 'ArrowFunctionExpression') {
      params = expression.callee.params.map(param => this.generateCode(param)).join(', ');
      if (expression.callee.body.type === 'BlockStatement') {
        body = this.generateCode(expression.callee.body).trim();
      } else {
        // Concise arrow function
        const expressionBody = this.generateCode(expression.callee.body).trim();
        body = `{ return ${expressionBody}; }`;
      }
    }

    this.methods.push(`${name}(${params}) ${body}`);
    const callArgs = expression.arguments.map(arg => this.generateCode(arg)).join(', ');
    this.calls.push(`this.${name}(${callArgs});`);
  }

  /**
   * Process function calls in the global scope.
   * 
   * @param {Object} expression - The CallExpression node.
   */
  processFunctionCall(expression) {
    const callExpression = this.generateCode(expression).trim();
    this.calls.push(`${callExpression};`);
  }

  /**
   * Generate unique method names to avoid conflicts.
   * 
   * @param {string} base - The base name for the method.
   * @returns {string} A unique method name.
   */
  generateUniqueMethodName(base) {
    const name = `${base}_${this.uniqueMethodCounter}`;
    this.uniqueMethodCounter += 1;
    return name;
  }

  /**
   * Generate code from an AST node based on its start and end positions.
   * 
   * @param {Object} node - The AST node.
   * @returns {string} The generated code as a string.
   */
  generateCode(node) {
    return this.scriptContent.slice(node.start, node.end);
  }
}

module.exports = ScriptInterpreter;
```

### cat\src\transformer.js

```javascript
/**
 * Transform parsed HTML into JavaScript DOM manipulation code
 * @param {Object} parsedHTML - The parsed HTML structure
 * @returns {string} - JavaScript code to create the DOM structure
 */
function transformToJavaScript(parsedHTML) {
    let code = '';
    let varCounter = 0;
  
    function generateVarName() {
      return `el_${varCounter++}`;
    }
  
    function escapeString(str) {
      return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n');
    }
  
    function transformNode(node, parentVar) {
      let nodeCode = '';
      const varName = generateVarName();
  
      if (node.type === 'tag' && !['style', 'script'].includes(node.name)) {
        nodeCode += `const ${varName} = document.createElement('${node.name}');\n`;
        
        Object.entries(node.attributes).forEach(([attr, value]) => {
          nodeCode += `${varName}.setAttribute('${attr}', '${escapeString(value)}');\n`;
        });
  
        node.children.forEach(child => {
          nodeCode += transformNode(child, varName);
        });
  
      } else if (node.type === 'text') {
        const trimmedContent = node.content.trim();
        if (trimmedContent) {
          nodeCode += `const ${varName} = document.createTextNode('${escapeString(trimmedContent)}');\n`;
          if (parentVar) {
            nodeCode += `${parentVar}.appendChild(${varName});\n`;
          }
        }
        return nodeCode;
      } else if (node.type === 'comment') {
        nodeCode += `const ${varName} = document.createComment('${escapeString(node.data)}');\n`;
      } else {
        return '';
      }
  
      if (parentVar) {
        nodeCode += `${parentVar}.appendChild(${varName});\n`;
      }
  
      return nodeCode;
    }
  
    parsedHTML.forEach(node => {
      code += transformNode(node);
    });
  
    return code.trim();
  }
  
  module.exports = { transformToJavaScript };
```

### cat\src\typeof.js

```javascript
/**
 * Determine the type of HTML file based on its name
 * @param {string} fileName - Name of the HTML file
 * @returns {string} - Type of the file ('component', 'page', or 'other')
 */
function determineFileType(fileName) {
  if (fileName.endsWith('.comp.html')) {
    return 'component';
  } else if (fileName.endsWith('.page.html')) {
    return 'page';
  } else {
    return 'other';
  }
}

module.exports = { determineFileType };
```

The Custom Element class it's being compiled correctly, but it's not appending the fragmented document inside the main DOM correctly. I'd like you find the reason, and address the issue. Don't output the code, just the blueprint of the solution. If approve it, then you provide the updated code. Important, we won't use Shadow DOM.