fix(elements): added flag to adhere to style encapsulation

Added new API to let ShadowDom encapsulation to be isolated and avoid injection of shared styles
(no UT merged)

Author: lmartorella

packages/platform-browser/src/dom/dom_renderer.ts

@@ -34,6 +34,11 @@ export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
  */
 const REMOVE_STYLES_ON_COMPONENT_DESTROY_DEFAULT = true;
 
+/**
+ * The default value for the `ISOLATED_SHADOW_DOM` DI token.
+ */
+const ISOLATED_SHADOW_DOM_DEFAULT = false;
+
 /**
  * A [DI token](guide/glossary#di-token "DI token definition") that indicates whether styles
  * of destroyed components should be removed from DOM.
@@ -47,6 +52,20 @@ export const REMOVE_STYLES_ON_COMPONENT_DESTROY =
       factory: () => REMOVE_STYLES_ON_COMPONENT_DESTROY_DEFAULT,
     });
 
+/**
+ * A [DI token](guide/glossary#di-token "DI token definition") that indicates whether the style
+ * of components that are using ShadowDom as encapsulation must remain isolated from other 
+ * components instances styles and/or global styles.
+ *
+ * By default, the value is set to `false`.
+ * @publicApi
+ */
+export const ISOLATED_SHADOW_DOM =
+    new InjectionToken<boolean>(ngDevMode ? 'IsolatedShadowDom' : '', {
+      providedIn: 'root',
+      factory: () => ISOLATED_SHADOW_DOM_DEFAULT,
+    });
+
 export function shimContentAttribute(componentShortId: string): string {
   return CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId);
 }
@@ -71,6 +90,7 @@ export class DomRendererFactory2 implements RendererFactory2, OnDestroy {
       private readonly sharedStylesHost: SharedStylesHost,
       @Inject(APP_ID) private readonly appId: string,
       @Inject(REMOVE_STYLES_ON_COMPONENT_DESTROY) private removeStylesOnCompDestroy: boolean,
+      @Inject(ISOLATED_SHADOW_DOM) private readonly isolatedShadowDom: boolean,
       @Inject(DOCUMENT) private readonly doc: Document,
       @Inject(PLATFORM_ID) readonly platformId: Object,
       readonly ngZone: NgZone,
@@ -123,7 +143,7 @@ export class DomRendererFactory2 implements RendererFactory2, OnDestroy {
           break;
         case ViewEncapsulation.ShadowDom:
           return new ShadowDomRenderer(
-              eventManager, sharedStylesHost, element, type, doc, ngZone, this.nonce,
+              eventManager, this.isolatedShadowDom ? null : sharedStylesHost, element, type, doc, ngZone, this.nonce,
               platformIsServer);
         default:
           renderer = new NoneEncapsulationDomRenderer(
@@ -358,7 +378,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
 
   constructor(
       eventManager: EventManager,
-      private sharedStylesHost: SharedStylesHost,
+      private readonly sharedStylesHost: SharedStylesHost | null,
       private hostEl: any,
       component: RendererType2,
       doc: Document,
@@ -374,7 +394,8 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
       this.shadowRoot.innerHTML = "";
     }
 
-    this.sharedStylesHost.addHost(this.shadowRoot);
+    this.sharedStylesHost?.addHost(this.shadowRoot);
+
     const styles = shimStylesContent(component.id, component.styles);
 
     for (const style of styles) {
@@ -407,7 +428,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
   }
 
   override destroy() {
-    this.sharedStylesHost.removeHost(this.shadowRoot);
+    this.sharedStylesHost?.removeHost(this.shadowRoot);
   }
 }
 

packages/platform-browser/src/platform-browser.ts

@@ -74,7 +74,7 @@ export {Meta, MetaDefinition} from './browser/meta';
 export {Title} from './browser/title';
 export {disableDebugTools, enableDebugTools} from './browser/tools/tools';
 export {By} from './dom/debug/by';
-export {REMOVE_STYLES_ON_COMPONENT_DESTROY} from './dom/dom_renderer';
+export {REMOVE_STYLES_ON_COMPONENT_DESTROY, ISOLATED_SHADOW_DOM} from './dom/dom_renderer';
 export {EVENT_MANAGER_PLUGINS, EventManager, EventManagerPlugin} from './dom/events/event_manager';
 export {HAMMER_GESTURE_CONFIG, HAMMER_LOADER, HammerGestureConfig, HammerLoader, HammerModule} from './dom/events/hammer_gestures';
 export {DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl, SafeValue} from './security/dom_sanitization_service';