fix(engine-dom): remove scoped custom element registry (#3310)

salesforce · Jan 24, 2023 · fba8501 · fba8501
1 parent 92211d2
commit fba8501
Show file tree

Hide file tree

Showing 22 changed files with 15 additions and 786 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -51,9 +51,6 @@ commands:
       enable_native_custom_element_lifecycle:
         type: boolean
         default: false
-      enable_scoped_custom_element_registry:
-        type: boolean
-        default: false
       disable_aria_reflection_polyfill:
         type: boolean
         default: false
@@ -85,7 +82,6 @@ commands:
             <<# parameters.disable_synthetic >> DISABLE_SYNTHETIC=1 <</ parameters.disable_synthetic >> \
             <<# parameters.force_native_shadow_mode >> FORCE_NATIVE_SHADOW_MODE_FOR_TEST=1 <</ parameters.force_native_shadow_mode >> \
             <<# parameters.enable_native_custom_element_lifecycle >> ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE=1 <</ parameters.enable_native_custom_element_lifecycle >> \
-            <<# parameters.enable_scoped_custom_element_registry >> ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY=1 <</ parameters.enable_scoped_custom_element_registry >> \
             <<# parameters.disable_aria_reflection_polyfill >> DISABLE_ARIA_REFLECTION_POLYFILL=1 <</ parameters.disable_aria_reflection_polyfill >> \
             <<# parameters.node_env_production >> NODE_ENV_FOR_TEST=production <</ parameters.node_env_production >> \
             <<# parameters.disable_synthetic_shadow_support_in_compiler >> DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER=1 <</ parameters.disable_synthetic_shadow_support_in_compiler >> \
@@ -176,9 +172,6 @@ commands:
       enable_native_custom_element_lifecycle:
         type: boolean
         default: false
-      enable_scoped_custom_element_registry:
-        type: boolean
-        default: false
       disable_aria_reflection_polyfill:
         type: boolean
         default: false
@@ -201,7 +194,6 @@ commands:
           disable_synthetic: << parameters.disable_synthetic >>
           force_native_shadow_mode: << parameters.force_native_shadow_mode >>
           enable_native_custom_element_lifecycle: << parameters.enable_native_custom_element_lifecycle >>
-          enable_scoped_custom_element_registry: << parameters.enable_scoped_custom_element_registry >>
           disable_aria_reflection_polyfill: << parameters.disable_aria_reflection_polyfill >>
           node_env_production: << parameters.node_env_production >>
           disable_synthetic_shadow_support_in_compiler: << parameters.disable_synthetic_shadow_support_in_compiler >>
@@ -264,21 +256,9 @@ jobs:
           force_native_shadow_mode: true
       - run_karma:
           enable_native_custom_element_lifecycle: true
-      - run_karma:
-          enable_scoped_custom_element_registry: true
-      - run_karma:
-          disable_synthetic: true
-          enable_native_custom_element_lifecycle: true
-      - run_karma:
-          disable_synthetic: true
-          enable_scoped_custom_element_registry: true
-      - run_karma:
-          enable_native_custom_element_lifecycle: true
-          enable_scoped_custom_element_registry: true
       - run_karma:
           disable_synthetic: true
           enable_native_custom_element_lifecycle: true
-          enable_scoped_custom_element_registry: true
       - run_karma:
           disable_synthetic: true
           disable_aria_reflection_polyfill: true

diff --git a/packages/@lwc/engine-dom/src/custom-elements/create-custom-element-scoped.ts b/packages/@lwc/engine-dom/src/custom-elements/create-custom-element-scoped.ts
diff --git a/packages/@lwc/engine-dom/src/custom-elements/create-custom-element.ts b/packages/@lwc/engine-dom/src/custom-elements/create-custom-element.ts
@@ -4,11 +4,9 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-import features from '@lwc/features';
 import { hasCustomElements } from './has-custom-elements';
 import { createCustomElementCompat } from './create-custom-element-compat';
 import { createCustomElementUsingUpgradableConstructor } from './create-custom-element-using-upgradable-constructor';
-import { createCustomElementScoped } from './create-custom-element-scoped';
 import type { LifecycleCallback } from '@lwc/engine-core';
 
 /**
@@ -32,12 +30,8 @@ export let createCustomElement: (
 ) => HTMLElement;
 
 if (hasCustomElements) {
-    if (features.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
-        createCustomElement = createCustomElementScoped;
-    } else {
-        // use the global registry, with an upgradable constructor for the defined custom element
-        createCustomElement = createCustomElementUsingUpgradableConstructor;
-    }
+    // use the global registry, with an upgradable constructor for the defined custom element
+    createCustomElement = createCustomElementUsingUpgradableConstructor;
 } else {
     // no registry available here
     createCustomElement = createCustomElementCompat;

diff --git a/packages/@lwc/features/src/flags.ts b/packages/@lwc/features/src/flags.ts
@@ -15,7 +15,6 @@ const features: FeatureFlagMap = {
     ENABLE_WIRE_SYNC_EMIT: null,
     ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
     ENABLE_FROZEN_TEMPLATE: null,
     DISABLE_ARIA_REFLECTION_POLYFILL: null,
     ENABLE_PROGRAMMATIC_STYLESHEETS: null,

diff --git a/packages/@lwc/features/src/types.ts b/packages/@lwc/features/src/types.ts
@@ -57,14 +57,6 @@ export interface FeatureFlagMap {
      */
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: FeatureFlagValue;
 
-    /**
-     * Flag to enable scoped custom element registry (aka pivots). This patches the global custom elements registry
-     * to support having LWC components with the same tag name as third-party custom elements.
-     *
-     * If this flag is disabled, then LWC components with the same tag name as third-party custom elements may conflict.
-     */
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: FeatureFlagValue;
-
     /**
      * Flag to enable the "frozen template" feature. With this flag enabled, the template object
      * imported from HTML files is frozen and cannot be modified. E.g. this will throw:

diff --git a/packages/@lwc/integration-karma/scripts/karma-configs/test/tags.js b/packages/@lwc/integration-karma/scripts/karma-configs/test/tags.js
@@ -12,7 +12,6 @@ const {
     SYNTHETIC_SHADOW_ENABLED,
     FORCE_NATIVE_SHADOW_MODE_FOR_TEST,
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE,
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY,
     DISABLE_ARIA_REFLECTION_POLYFILL,
     DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
     NODE_ENV_FOR_TEST,
@@ -24,7 +23,6 @@ const TAGS = [
     FORCE_NATIVE_SHADOW_MODE_FOR_TEST && 'force-native-shadow-mode',
     COMPAT && 'compat',
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE && 'native-lifecycle',
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY && 'scoped-registry',
     DISABLE_ARIA_REFLECTION_POLYFILL && 'disable-aria-polyfill',
     DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER && 'disable-synthetic-in-compiler',
     `NODE_ENV-${NODE_ENV_FOR_TEST}`,

diff --git a/packages/@lwc/integration-karma/scripts/karma-plugins/env.js b/packages/@lwc/integration-karma/scripts/karma-plugins/env.js
@@ -20,7 +20,6 @@ const {
     FORCE_NATIVE_SHADOW_MODE_FOR_TEST,
     SYNTHETIC_SHADOW_ENABLED,
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE,
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY,
     DISABLE_ARIA_REFLECTION_POLYFILL,
     NODE_ENV_FOR_TEST,
 } = require('../shared/options');
@@ -39,7 +38,6 @@ function createEnvFile() {
         window.lwcRuntimeFlags = {
             ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: ${FORCE_NATIVE_SHADOW_MODE_FOR_TEST},
             ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: ${ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE},
-            ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: ${ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY},
             DISABLE_ARIA_REFLECTION_POLYFILL: ${DISABLE_ARIA_REFLECTION_POLYFILL}
         };
         window.process = {

diff --git a/packages/@lwc/integration-karma/scripts/shared/options.js b/packages/@lwc/integration-karma/scripts/shared/options.js
@@ -18,9 +18,6 @@ const FORCE_NATIVE_SHADOW_MODE_FOR_TEST = Boolean(process.env.FORCE_NATIVE_SHADO
 const ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE = Boolean(
     process.env.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE
 );
-const ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY = Boolean(
-    process.env.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY
-);
 const DISABLE_ARIA_REFLECTION_POLYFILL = Boolean(process.env.DISABLE_ARIA_REFLECTION_POLYFILL);
 const DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER = Boolean(
     process.env.DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER
@@ -31,7 +28,6 @@ module.exports = {
     // Test configuration
     COMPAT,
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE,
-    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY,
     DISABLE_ARIA_REFLECTION_POLYFILL,
     NODE_ENV_FOR_TEST,
     FORCE_NATIVE_SHADOW_MODE_FOR_TEST,

diff --git a/packages/@lwc/integration-karma/test/custom-elements-registry/index.spec.js b/packages/@lwc/integration-karma/test/custom-elements-registry/index.spec.js
@@ -131,27 +131,6 @@ if (SUPPORTS_CUSTOM_ELEMENTS) {
         });
 
         describe('two copies of LWC engine loaded', () => {
-            if (window.lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
-                it('no errors on duplicate tag names', () => {
-                    evaluate(engineScripts);
-                    evaluate(`(${createLWC})()`);
-                    expect(
-                        iframe.contentDocument.querySelector('x-foo').shadowRoot.querySelector('h1')
-                            .textContent
-                    ).toEqual('Hello LWC');
-                    evaluate(engineScripts);
-                    evaluate(`(${createLWC})({ text: 'Hello LWC 2' })`);
-                    const elements = iframe.contentDocument.querySelectorAll('x-foo');
-                    expect(elements.length).toEqual(2);
-                    expect(elements[0].shadowRoot.querySelector('h1').textContent).toEqual(
-                        'Hello LWC'
-                    );
-                    expect(elements[1].shadowRoot.querySelector('h1').textContent).toEqual(
-                        'Hello LWC 2'
-                    );
-                });
-            }
-
             [false, true].forEach((customElement) => {
                 const testName = customElement
                     ? 'with CustomElementConstructor'