Test: Component Initializer

Details

Raw Data

{
  "id": "c24d9b11-a0f0-4a78-b6f2-bb6e6b75c89c",
  "type": "general",
  "status": "completed",
  "title": "Test: Component Initializer",
  "description": "Testing data-component attribute initialization",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 16px 0;\">Component Initializer Test</h2>\n<p>This tests the data-component attribute for declarative initialization.</p>\n\n<div data-component=\"accordion\" style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:16px 0;\">\n  <h4 style=\"margin:0;color:#c99542;\">Accordion Component</h4>\n  <p id=\"accordion-status\" style=\"color:#7f848e;margin:8px 0 0 0;\">Status: Not initialized</p>\n</div>\n\n<div data-component=\"tabs\" style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:16px 0;\">\n  <h4 style=\"margin:0;color:#c99542;\">Tabs Component</h4>\n  <p id=\"tabs-status\" style=\"color:#7f848e;margin:8px 0 0 0;\">Status: Not initialized</p>\n</div>\n</div>\n\n<script>\n// Define component initializers on window\nwindow.initAccordion = function(el) {\n  var status = el.querySelector('#accordion-status');\n  if (status) {\n    status.textContent = 'Status: Initialized!';\n    status.style.color = '#98c379';\n  }\n  el.style.borderLeft = '3px solid #98c379';\n};\n\nwindow.initTabs = function(el) {\n  var status = el.querySelector('#tabs-status');\n  if (status) {\n    status.textContent = 'Status: Initialized!';\n    status.style.color = '#98c379';\n  }\n  el.style.borderLeft = '3px solid #98c379';\n};\n</script>"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T05:07:24.669Z",
  "updatedAt": "2026-01-07T05:07:24.889Z",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "components",
    "test"
  ],
  "targetUser": "claude"
}