Seamlessly use Vue.component(tagName, vueDefinition) (or any other registration/loading mechanism) with existing Vue VueComponent vueDefinitions to have them become native DOM WebComponents supporting shadow DOM semantics for native slot elements and (open or closed) shadowRoot fragments including css encapsulation scoping.

See examples/.

You will need both files in the src/ directory. The changes to vue.js are minor and in three places. For details on what and why, read this posting; and this forum.vuejs.org Show & Tell announcement.

My sincere hope is that the Vue team incorporates the required native slot element fix; or some equivalent, back into the Vue vue.js core code (details are described in posting above, and can be seen in vue.js in this repos src/ directory). If you agree that this feature-update is important, please voice your opinion to the Vue team.

NOTE: For the examples/ to run-properly you need to either use the modified vue.js version contained in this repos src/ directory, or build-your-own version, that contains the equivalent modifications described in this posting.

This plugin as a .mjs module is included in the EdgeShell standard .ess asset libraries accessible from EdgeScript.