{"id":15198494,"url":"https://github.com/peixin/vue3-custom-component","last_synced_at":"2026-03-05T08:01:44.326Z","repository":{"id":207576970,"uuid":"719488765","full_name":"peixin/vue3-custom-component","owner":"peixin","description":"Vue3 custom element does not render below chrome 66","archived":false,"fork":false,"pushed_at":"2023-11-16T13:46:05.000Z","size":2144,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-03T03:44:23.525Z","etag":null,"topics":["chrome","chromium","custom-elements","vue","vue3","web-components"],"latest_commit_sha":null,"homepage":"https://vue3-custom-component.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peixin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-16T09:23:46.000Z","updated_at":"2023-11-16T13:53:52.000Z","dependencies_parsed_at":"2023-11-16T14:48:00.310Z","dependency_job_id":"1272c351-e2ba-4b7f-bec7-e773f424c5ae","html_url":"https://github.com/peixin/vue3-custom-component","commit_stats":null,"previous_names":["peixin/vue3-custom-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/peixin/vue3-custom-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peixin%2Fvue3-custom-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peixin%2Fvue3-custom-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peixin%2Fvue3-custom-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peixin%2Fvue3-custom-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peixin","download_url":"https://codeload.github.com/peixin/vue3-custom-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peixin%2Fvue3-custom-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30115662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T03:40:26.266Z","status":"ssl_error","status_checked_at":"2026-03-05T03:39:15.902Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","chromium","custom-elements","vue","vue3","web-components"],"created_at":"2024-09-28T01:09:26.142Z","updated_at":"2026-03-05T08:01:44.290Z","avatar_url":"https://github.com/peixin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Demo https://vue3-custom-component.vercel.app/\n\n# Issue \nVue3 custom element (Web Component) does not render below Chrome 65 (Android 8 built-in webview)\n\n# Reason\nWhen `isCustomizedBuiltIn` is false, Vue3 passes `undefined` as the second argument to `document.createElement` through `nodeOps.createElement` when the built-in tag name is not used as a custom element. This usage does not work in Chrome versions prior to 66, meaning that the `constructor` and `connectedCallback` of the custom element will not be triggered.\n\nInterestingly, starting from version 66, the `constructor` will not be triggered upon creation, but when appended to the DOM, the `constructor` and `connectedCallback` will be triggered in sequence, allowing it to function properly. In the latest version, the `constructor` will be triggered upon creation, and when appended to the DOM, the `connectedCallback` will be triggered.\n\n# Temporary solution\n```javascript\n// file: index.html\n// patch the createElement to avoid options is nullish\nvar _createElement = window.document.createElement;\nwindow.document.createElement = function (tagName, options) {\n    if (options) {\n        return _createElement.call(window.document, tagName, options);\n    } else {\n        return _createElement.call(window.document, tagName);\n    }\n}\n```\n\n# Debug Progress\n\n### Demo Showcase\n\n#### Demo custom element code\n```javascript\n// file: src/custom-element.ts\nclass CustomElement extends HTMLElement {\n  constructor() {\n    super();\n    console.log(\"Custom element created\");\n  }\n\n  connectedCallback() {\n    const text = this.dataset[\"text\"];\n    console.log(\"Custom element added to page --\u003e \", text);\n    const div = document.createElement(\"div\");\n    div.innerText = \"custom-element with text: \" + text;\n\n    this.appendChild(div);\n  }\n}\n\ncustomElements.define(\"custom-element\", CustomElement);\n```\n\n#### Demo Result\n\n**Chrome/65.0.3325.144**\n\n![Chrome/65.0.3325.144](./docs/images/demo-result-chrome-65.png)\n\n**Chrome/66.0.3347.0**\n\n![Chrome/66.0.3347.0](./docs/images/demo-result-chrome-66.png)\n\n**Chrome/118.0.0.0**\n\n![Chrome/118.0.0.0](./docs/images/demo-result-chrome-118.png)\n\n### Chromium Source Code Changes\n[chromium version: 65.0.3323.3](https://chromium.googlesource.com/chromium/src/+/470d3a6be2f380affa8de3dc0dd1508f3eeba9f7/third_party/WebKit/Source/core/dom/Document.cpp#908)\n\n![chromium version: 65.0.3323.3](./docs/images/code-chromium-65.png)\n\n[chromium version: 66.0.3347.3](https://chromium.googlesource.com/chromium/src/+/3b9cfdda2eb80dab7457ec61e619dd910d194248/third_party/WebKit/Source/core/dom/Document.cpp#1075)\n\n![chromium version: 66.0.3347.3](./docs/images/code-chromium-66.png)\n\n[chromium version 121.0.61313.1](https://chromium.googlesource.com/chromium/src/+/refs/tags/121.0.6131.1/third_party/blink/renderer/core/dom/document.cc#1282)\n\n![chromium version 121.0.61313.1](./docs/images/code-chromium-118.png)\n\n\n### Console Debug\n\n**Chrome/65.0.3325.144**\n\n![Chrome/65.0.3325.144](./docs/images/console-debug-chrome-65.png)\n\n**Chrome/66.0.3347.0**\n\n![Chrome/66.0.3347.0](./docs/images/console-debug-chrome-66.png)\n\n**Chrome/118.0.0.0**\n\n![Chrome/118.0.0.0](./docs/images/console-debug-chrome-118.png)\n\n\n\n**Test Code**\n```javascript\n// define custom element\nclass CustomElement extends HTMLElement {\n  constructor() {\n    super();\n    console.log(\"Custom element created\");\n  }\n\n  connectedCallback() {\n    const text = this.dataset[\"text\"];\n    console.log(\"Custom element added to page --\u003e \", text);\n    const div = document.createElement(\"div\");\n    div.innerText = \"custom-element with text: \" + text;\n\n    this.appendChild(div);\n  }\n}\ncustomElements.define(\"custom-element\", CustomElement);\n\n\n// create element with options undefined\ne = document.createElement(\"custom-element\", undefined)\n// Chrome/65.0.3325.144 ❌ constructor not executed\n// Chrome/66.0.3347.0 ⚠️ constructor not executed\n// Chrome/118.0.0.0 ✅ constructor executed\n\n// create element with options null\ndocument.createElement(\"custom-element\", null)\n// Chrome/65.0.3325.144 ❌ constructor not executed\n// Chrome/66.0.3347.0 ⚠️ constructor not executed\n// Chrome/118.0.0.0 ✅ constructor executed\n\n// create element with options string empty\ndocument.createElement(\"custom-element\", \"\")\n// Chrome/65.0.3325.144 ❌ constructor not executed\n// Chrome/66.0.3347.0 ⚠️ constructor not executed\n// Chrome/118.0.0.0 ✅ constructor executed\n\n// create element with out options\ndocument.createElement(\"custom-element\")\n// Chrome/65.0.3325.144 ✅ constructor executed\n// Chrome/66.0.3347.0 ✅ constructor executed\n// Chrome/118.0.0.0 ✅ constructor executed\n\n// create element with options {is: \"\"}\ndocument.createElement(\"custom-element\", {is: \"\"})\n// Chrome/65.0.3325.144 ✅ constructor executed\n// Chrome/66.0.3347.0 ✅ constructor executed\n// Chrome/118.0.0.0 ✅ constructor executed\n\n// create element with options empty object\ndocument.createElement(\"custom-element\", {})\n// Chrome/65.0.3325.144 ✅ constructor executed\n// Chrome/66.0.3347.0 ✅ constructor executed\n// Chrome/118.0.0.0 ✅ constructor executed\n\n// test appent to dom\ntestDiv = document.getElementById(\"testDiv\")\n\ntestDiv.appendChild(e)\n// Chrome/65.0.3325.144 ❌ constructor not executed \u0026\u0026 connectedCallback not executed\n// Chrome/66.0.3347.0 ✅ constructor executed \u0026\u0026 connectedCallback executed\n// Chrome/118.0.0.0 ✅ connectedCallback executed\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeixin%2Fvue3-custom-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeixin%2Fvue3-custom-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeixin%2Fvue3-custom-component/lists"}