fix(runtime): add root scope id to the nested child as classname

sass compiler adds root scope id to the nested child elements too, therefore nested element selectors are not working from the root component since the root scope id is not adding as classname to the nested children elements

ionic-team#5702

src/declarations/stencil-private.ts

@@ -1099,6 +1099,13 @@ export interface HostElement extends HTMLElement {
    */
   ['s-sc']?: string;
 
+  /**
+   * Root Scope Id
+   * The scope id of the root component when using scoped css encapsulation
+   * or using shadow dom but the browser doesn't support it
+   */
+  ['s-rsc']?: string;
+
   /**
    * Hot Module Replacement, dev mode only
    *

src/runtime/vdom/vdom-render.ts

@@ -111,6 +111,16 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
       elm.classList.add((elm['s-si'] = scopeId));
     }
 
+    if (BUILD.shadowDom || BUILD.scoped) {
+      const rootScopeId =
+        newParentVNode.$elm$?.['s-rsc'] || newParentVNode.$elm$?.['s-si'] || newParentVNode.$elm$?.['s-sc'];
+
+      if (rootScopeId) {
+        elm['s-rsc'] = rootScopeId;
+        !elm.classList.contains(rootScopeId) && elm.classList.add(rootScopeId);
+      }
+    }
+
     if (newVNode.$children$) {
       for (i = 0; i < newVNode.$children$.length; ++i) {
         // create the node

test/wdio/scoped-id-in-nested-classname/cmp-level-1.scss

@@ -0,0 +1,7 @@
+:host {
+  cmp-level-2 {
+    cmp-level-3 {
+      padding: 32px;
+    }
+  }
+}

test/wdio/scoped-id-in-nested-classname/cmp-level-1.tsx

@@ -0,0 +1,13 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-level-1',
+  styleUrl: 'cmp-level-1.scss',
+  shadow: false,
+  scoped: true,
+})
+export class CmpLevel1 {
+  render() {
+    return <cmp-level-2></cmp-level-2>;
+  }
+}

test/wdio/scoped-id-in-nested-classname/cmp-level-2.tsx

@@ -0,0 +1,16 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-level-2',
+  shadow: false,
+  scoped: true,
+})
+export class CmpLevel2 {
+  render() {
+    return (
+      <cmp-level-3>
+        <slot />
+      </cmp-level-3>
+    );
+  }
+}

test/wdio/scoped-id-in-nested-classname/cmp-level-3.scss

@@ -0,0 +1,3 @@
+:host {
+  padding: 8px;
+}

test/wdio/scoped-id-in-nested-classname/cmp-level-3.tsx

@@ -0,0 +1,17 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-level-3',
+  styleUrl: 'cmp-level-3.scss',
+  shadow: false,
+  scoped: true,
+})
+export class CmpLevel3 {
+  render() {
+    return (
+      <div>
+        <slot>DEFAULT</slot>
+      </div>
+    );
+  }
+}

test/wdio/scoped-id-in-nested-classname/cmp.test.tsx

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('scope-id-in-nested-classname', function () {
+  beforeEach(() => {
+    render({
+      template: () => <cmp-level-1></cmp-level-1>,
+    });
+  });
+
+  it('should have root scope id in the nested element as classname', async () => {
+    await expect($('cmp-level-3')).toHaveElementClass('sc-cmp-level-1');
+  });
+});