feat: adjust shadow injection strategy

Author: yyx990803

lib/loader.js

@@ -155,12 +155,12 @@ module.exports = function (content) {
   // add requires for styles
   let cssModules
   if (parts.styles.length) {
-    const needsLazyInjection = isServer || isShadowMode
+    const needsExplicitInjection = isServer || isShadowMode
     let styleInjectionCode = 'function injectStyle (context) {\n'
     if (needsHotReload) {
       styleInjectionCode += `  if (disposed) return\n`
     }
-    if (needsLazyInjection) {
+    if (needsExplicitInjection) {
       styleInjectionCode += `var i\n`
     }
     parts.styles.forEach((style, i) => {
@@ -174,7 +174,7 @@ module.exports = function (content) {
       // vue-style-loader exposes inject functions in SSR or shadow mode so they
       // are always called
       const invokeStyle =
-        needsLazyInjection && hasVueStyleLoader
+        needsExplicitInjection && hasVueStyleLoader
           ? code => `;(i=${code},i.__inject__&&i.__inject__(context),i)\n`
           : code => `  ${code}\n`
 
@@ -241,27 +241,6 @@ module.exports = function (content) {
     output += styleInjectionCode
   }
 
-  // we require the component normalizer function, and call it like so:
-  // normalizeComponent(
-  //   scriptExports,
-  //   compiledTemplate,
-  //   functionalTemplate,
-  //   injectStyles,
-  //   scopeId,
-  //   moduleIdentifier (server only)
-  // )
-  const componentNormalizerRequest = loaderUtils.stringifyRequest(
-    loaderContext,
-    '!' + componentNormalizerPath
-  )
-  if (!options.esModule) {
-    output +=
-      `var normalizeComponent = require(${componentNormalizerRequest}).default\n`
-  } else {
-    output +=
-      `import normalizeComponent from ${componentNormalizerRequest}\n`
-  }
-
   // <script>
   output += '/* script */\n'
   const script = parts.script
@@ -322,12 +301,11 @@ module.exports = function (content) {
 
   // style
   // the injection function is passed to the normalizer and injected into
-  // component lifecycle hooks. In shadow mode, we expose the inject function
-  // directly on the component's options so we don't pass it here.
+  // component lifecycle hooks.
   output += '/* styles */\n'
   output +=
     'var __vue_styles__ = ' +
-    (parts.styles.length && !isShadowMode ? 'injectStyle' : 'null') +
+    (parts.styles.length ? 'injectStyle' : 'null') +
     '\n'
 
   // scopeId
@@ -344,7 +322,27 @@ module.exports = function (content) {
     (isServer ? JSON.stringify(hash(this.request)) : 'null') +
     '\n'
 
-  // close normalizeComponent call
+  // we require the component normalizer function, and call it like so:
+  // normalizeComponent(
+  //   scriptExports,
+  //   compiledTemplate,
+  //   functionalTemplate,
+  //   injectStyles,
+  //   scopeId,
+  //   moduleIdentifier, (server only)
+  //   isShadowMode (vue-cli only)
+  // )
+  const componentNormalizerRequest = loaderUtils.stringifyRequest(
+    loaderContext,
+    '!' + componentNormalizerPath
+  )
+  if (!options.esModule) {
+    output +=
+      `var normalizeComponent = require(${componentNormalizerRequest}).default\n`
+  } else {
+    output +=
+      `import normalizeComponent from ${componentNormalizerRequest}\n`
+  }
   output +=
     'var Component = normalizeComponent(\n' +
     '  __vue_script__,\n' +
@@ -353,26 +351,9 @@ module.exports = function (content) {
     '  __vue_styles__,\n' +
     '  __vue_scopeId__,\n' +
     '  __vue_module_identifier__\n' +
+    (isShadowMode ? `,true` : ``) +
     ')\n'
 
-  // expose style injection on options
-  // this will be used by vue-cli's web component entry
-  if (isShadowMode) {
-    // the shadow inject id will be the module id of the entry Vue component,
-    // which is the frist Vue component encountered in this compilation
-    let shadowInjectId = process.env.VUE_SHADOW_INJECT_ID
-    if (!shadowInjectId) {
-      shadowInjectId = process.env.VUE_SHADOW_INJECT_ID =
-        `__vue_shadow_injector__${moduleId.replace(`data-v-`, '')}`
-    }
-    output +=
-      `var shadowInjectId = Component.options.__shadowInjectId = '${shadowInjectId}'\n` +
-      `var injectors = window[shadowInjectId] || (window[shadowInjectId] = [])\n`
-    if (parts.styles.length) {
-      output += `injectors.push(injectStyle)`
-    }
-  }
-
   // development-only code
   if (!isProduction) {
     // add filename in dev

lib/runtime/component-normalizer.js

@@ -10,7 +10,8 @@ export default function normalizeComponent (
   functionalTemplate,
   injectStyles,
   scopeId,
-  moduleIdentifier /* server only */
+  moduleIdentifier, /* server only */
+  shadowMode /* vue-cli only */
 ) {
   var esModule
   var scriptExports = rawScriptExports = rawScriptExports || {}
@@ -69,7 +70,13 @@ export default function normalizeComponent (
     // never gets called
     options._ssrRegister = hook
   } else if (injectStyles) {
-    hook = injectStyles
+    if (shadowMode) {
+      hook = function () {
+        injectStyles(this.$root.$options.shadowRoot)
+      }
+    } else {
+      hook = injectStyles
+    }
   }
 
   if (hook) {