fix(runtime): fix blur handling of non-scoped elements (#6314)

* fix(runtime): fix blur handling of non-scoped elements

* progress

* prettier

* revert unneeded changes

* better solution

* prettier

* more progress

* more progress

* more progress

* fix lint

* progress

* revert

* prettier

* apply to all non shadow components

* tweak if

* make test stable

* prettier

* update tests

* prettier

* fix last e2e test

* only patch if constructor is given

* Revert "only patch if constructor is given"

This reverts commit 32e1550.

* allow to run in node env

Author: christian-bromann

src/runtime/bootstrap-custom-element.ts

@@ -45,9 +45,7 @@ export const proxyCustomElement = (Cstr: any, compactMeta: d.ComponentRuntimeMet
 
   // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check
   if (BUILD.experimentalSlotFixes) {
-    if (BUILD.scoped && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) {
-      // This check is intentionally not combined with the surrounding `experimentalSlotFixes` check
-      // since, moving forward, we only want to patch the pseudo shadow DOM when the component is scoped
+    if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
       patchPseudoShadowDom(Cstr.prototype);
     }
   } else {

src/runtime/bootstrap-lazy.ts

@@ -191,9 +191,7 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
 
       // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check
       if (BUILD.experimentalSlotFixes) {
-        // This check is intentionally not combined with the surrounding `experimentalSlotFixes` check
-        // since, moving forward, we only want to patch the pseudo shadow DOM when the component is scoped
-        if (BUILD.scoped && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) {
+        if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
           patchPseudoShadowDom(HostElement.prototype);
         }
       } else {

src/runtime/dom-extras.ts

@@ -566,6 +566,13 @@ function patchHostOriginalAccessor(
   accessorName: (typeof validElementPatches)[number] | (typeof validNodesPatches)[number],
   node: Node,
 ) {
+  /**
+   * skip this method if a component was imported from a non-browser environment
+   */
+  if (!globalThis.Node || !globalThis.Element) {
+    return;
+  }
+
   let accessor;
   if (validElementPatches.includes(accessorName as any)) {
     accessor = Object.getOwnPropertyDescriptor(Element.prototype, accessorName);

test/end-to-end/src/dom-api/dom-api.e2e.ts

@@ -241,11 +241,14 @@ describe('dom api e2e tests', () => {
     await page.waitForChanges();
 
     expect(elm).toEqualText(`
-      updated text content
+      dom apiupdated text content
     `);
 
     expect(elm).toEqualHtml(`
       <dom-api custom-hydrate-flag="">
+        <span class="blue green red" data-a="a" data-z="z">
+          dom api
+        </span>
         updated text content
       </dom-api>
     `);

test/wdio/computed-properties-prop-decorator/cmp.test.tsx

@@ -1,9 +1,11 @@
 import { Fragment, h } from '@stencil/core';
 import { render } from '@wdio/browser-runner/stencil';
+import { $, expect } from '@wdio/globals';
 
 describe('computed-properties-prop-decorator', () => {
   beforeEach(async () => {
     render({
+      components: [],
       template: () => (
         <>
           <computed-properties-prop-decorator></computed-properties-prop-decorator>
@@ -22,12 +24,12 @@ describe('computed-properties-prop-decorator', () => {
   });
 
   it('correctly sets computed property `@Prop()`s and triggers re-renders', async () => {
-    await expect($('computed-properties-prop-decorator')).toHaveText('no content');
+    await expect($('computed-properties-prop-decorator').$('div')).toHaveText('no content');
 
     const button = $('button');
     await button.click();
 
-    await expect($('computed-properties-prop-decorator')).toHaveText('These are my props');
+    await expect($('computed-properties-prop-decorator').$('div')).toHaveText('These are my props');
   });
 
   it('has the default value reflected to the correct attribute on the host', async () => {

test/wdio/computed-properties-state-decorator/cmp.test.tsx

@@ -1,9 +1,11 @@
 import { Fragment, h } from '@stencil/core';
 import { render } from '@wdio/browser-runner/stencil';
+import { $, expect } from '@wdio/globals';
 
 describe('computed-properties-state-decorator', () => {
   beforeEach(async () => {
     render({
+      components: [],
       template: () => (
         <>
           <computed-properties-state-decorator></computed-properties-state-decorator>
@@ -18,14 +20,14 @@ describe('computed-properties-state-decorator', () => {
   });
 
   it('correctly sets computed property `@State()`s and triggers re-renders', async () => {
-    const el: HTMLElement = document.querySelector('computed-properties-state-decorator');
-    await expect($(el)).toHaveText(['Has rendered: false', 'Mode: default'].join('\n'));
+    const el = $('computed-properties-state-decorator').$('div');
+    await expect(el).toHaveText(['Has rendered: false', 'Mode: default'].join('\n'));
 
     const button = document.querySelector('button');
     expect(button).toBeDefined();
 
     await $(button).click();
 
-    await expect($(el)).toHaveText(['Has rendered: true', 'Mode: super'].join('\n'));
+    await expect(el).toHaveText(['Has rendered: true', 'Mode: super'].join('\n'));
   });
 });

test/wdio/computed-properties-watch-decorator/cmp.test.tsx

@@ -1,9 +1,11 @@
 import { Fragment, h } from '@stencil/core';
 import { render } from '@wdio/browser-runner/stencil';
+import { $, expect } from '@wdio/globals';
 
 describe('computed-properties-watch-decorator', () => {
   beforeEach(async () => {
     render({
+      components: [],
       template: () => (
         <>
           <computed-properties-watch-decorator></computed-properties-watch-decorator>
@@ -19,7 +21,7 @@ describe('computed-properties-watch-decorator', () => {
   });
 
   it('triggers the watch callback when the associated prop changes', async () => {
-    const el = document.querySelector('computed-properties-watch-decorator');
+    const el = $('computed-properties-watch-decorator').$('div');
     await expect(el).toHaveText(['First name called with: not yet', 'Last name called with: not yet'].join('\n'));
 
     const button = document.querySelector('button');

test/wdio/dom-reattach/cmp-root.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'dom-reattach',
@@ -22,11 +22,11 @@ export class DomReattach {
 
   render() {
     return (
-      <Host>
+      <div>
         <p>componentWillLoad: {this.willLoad}</p>
         <p>componentDidLoad: {this.didLoad}</p>
         <p>disconnectedCallback: {this.didUnload}</p>
-      </Host>
+      </div>
     );
   }
 }

test/wdio/dom-reattach/cmp.test.tsx

@@ -32,18 +32,19 @@ describe('dom-reattach', function () {
 componentDidLoad: 1
 disconnectedCallback: ${disconnectCount}`;
 
-    await expect($('dom-reattach')).toHaveText(lifecycleTextWithDisconnectCount(0));
+    const $cmp = $('dom-reattach').$('div');
+    await expect($cmp).toHaveText(lifecycleTextWithDisconnectCount(0));
 
     await $('button').click();
-    await expect($('dom-reattach')).not.toExist();
+    await expect($cmp).not.toExist();
 
     await $('button').click();
-    await expect($('dom-reattach')).toHaveText(lifecycleTextWithDisconnectCount(1));
+    await expect($cmp).toHaveText(lifecycleTextWithDisconnectCount(1));
 
     await $('button').click();
-    await expect($('dom-reattach')).not.toExist();
+    await expect($cmp).not.toExist();
 
     await $('button').click();
-    await expect($('dom-reattach')).toHaveText(lifecycleTextWithDisconnectCount(2));
+    await expect($cmp).toHaveText(lifecycleTextWithDisconnectCount(2));
   });
 });

test/wdio/dynamic-imports/cmp.test.tsx

@@ -1,21 +1,23 @@
 import { h } from '@stencil/core';
 import { render } from '@wdio/browser-runner/stencil';
+import { $, expect } from '@wdio/globals';
 
 import type { DynamicImport } from './dynamic-import.js';
 
 describe('tag-names', () => {
   beforeEach(() => {
     render({
+      components: [],
       template: () => <dynamic-import></dynamic-import>,
     });
   });
 
   it('should load content from dynamic import', async () => {
-    await expect($('dynamic-import')).toHaveText('1 hello1 world1');
+    await expect($('dynamic-import').$('div')).toHaveText('1 hello1 world1');
 
-    const dynamicImport = document.querySelector('dynamic-import') as HTMLElement & DynamicImport;
+    const dynamicImport = document.querySelector('dynamic-import') as unknown as HTMLElement & DynamicImport;
     dynamicImport.update();
 
-    await expect($('dynamic-import')).toHaveText('2 hello2 world2');
+    await expect($('dynamic-import').$('div')).toHaveText('2 hello2 world2');
   });
 });