From d30d06c8ceeffa72d55c02cbbb27afd008ae380d Mon Sep 17 00:00:00 2001 From: Froxz Date: Wed, 30 Dec 2020 11:25:36 +0200 Subject: [PATCH 1/2] added shadowRoot for vue-style-loader --- src/utils/createVueInstance.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/createVueInstance.js b/src/utils/createVueInstance.js index feed93c..9fe0190 100644 --- a/src/utils/createVueInstance.js +++ b/src/utils/createVueInstance.js @@ -86,6 +86,7 @@ export default function createVueInstance(element, Vue, componentDefinition, pro if (options.shadow && element.shadowRoot) { element.shadowRoot.innerHTML = elementInnerHtml; rootElement.el = element.shadowRoot.children[0]; + rootElement.shadowRoot = element.shadowRoot; } else { element.innerHTML = elementInnerHtml; rootElement.el = element.children[0]; From d47007c50ee785c0072027670b7d697dce13c994 Mon Sep 17 00:00:00 2001 From: Froxz Date: Wed, 30 Dec 2020 22:31:45 +0200 Subject: [PATCH 2/2] added fallback to head and comments --- src/utils/createVueInstance.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/createVueInstance.js b/src/utils/createVueInstance.js index 9fe0190..b3f08e2 100644 --- a/src/utils/createVueInstance.js +++ b/src/utils/createVueInstance.js @@ -86,10 +86,11 @@ export default function createVueInstance(element, Vue, componentDefinition, pro if (options.shadow && element.shadowRoot) { element.shadowRoot.innerHTML = elementInnerHtml; rootElement.el = element.shadowRoot.children[0]; - rootElement.shadowRoot = element.shadowRoot; + rootElement.shadowRoot = element.shadowRoot; //this line allows `vue-style-loader` with `shadowMode` enabled inject styles into shadow-root } else { element.innerHTML = elementInnerHtml; rootElement.el = element.children[0]; + rootElement.shadowRoot = document.head; //fallback to head to append styles, if shadowDom is not supported ot disabled } reactiveProps(element, props);