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

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/test/scoped.spec.tsx

@@ -42,7 +42,7 @@ describe('scoped', () => {
     <cmp-a class="hydrated sc-cmp-a-h sc-cmp-a-s">
       <cmp-b class="hydrated sc-cmp-a sc-cmp-b-h sc-cmp-b-s">
         <!---->
-        <div class="sc-cmp-b sc-cmp-b-s">
+        <div class="sc-cmp-a sc-cmp-b sc-cmp-b-s">
           <span class="sc-cmp-a">
             Hola
           </span>

src/runtime/vdom/vdom-render.ts

@@ -111,6 +111,19 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
       elm.classList.add((elm['s-si'] = scopeId));
     }
 
+    if (BUILD.scoped) {
+      // to be able to style the deep nested scoped component from the root component,
+      // root component's scope id needs to be added to the child nodes since sass compiler
+      // adds scope id to the nested selectors during compilation phase
+      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,17 @@
+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');
+
+    const appliedCss = await (await $('cmp-level-3')).getCSSProperty('padding');
+    await expect(appliedCss.parsed.value).toBe(32);
+  });
+});