Shadow DOM support for Ember

[c69-addepar]

Hi Team, @itsjwala ,

since 1.19.0-alpha.0, @percy/cli now supports Shadow DOM.

Unfortunately, the changes in that repo alone are not enough to enable support for Ember apps. See percy/cli#1165 (comment)

Happy to provide more details if needed.

CC: @mmun @aschenoni

[itsjwala]

hey @c69-addepar 👋

Checking the error shared by you

Error: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed

This seems to be coming from internal scripts, and this shouldn't cause errors in taking snapshots imo.

---

I checked the changes in your percy-ember fork https://github.com/Addepar/percy-ember/pull/1/files, we'll be happy to merge this change upstream. though I couldn't understand the difference between innerHTML and replaceChildren done in the PR.

could you share a small reproducible sample for us to debug, we'd do regression on our end.

[mmun]

Hi @itsjwala,

The problem with preprocessing the DOM with $body.innerHTML = $scoped.innerHTML; is that all the existing shadow roots are lost. This is because $scoped.innerHTML, by spec, does not contain serialized shadow roots. Even if it did contain serialized shadow roots, for security reasons assigning innerHTML will not trigger their deserialization and will simple leave them as <template> tags.

Using $body.replaceChildren(...$scoped.children); preserves the DOM nodes and shadow roots directly without going through HTML. It's also worth nothing that since the whole DOM node is preserved it would also, of course, preserve the properties/state on the DOM nodes that might otherwise be reset when round-tripping through HTML. This would be a (minor) change in behavior but I'd argue it's a bug fix?

It's also possible (though too complex IMO) to preserve the rounding-tripping through HTML behavior if necessary using something like

let html = $scope.getInnerHTML({includeShadowRoots: true});
// $body.innerHTML = html; // for security reasons, this doesn't work in browsers
let fragment = new DOMParser().parseFromString(html, 'text/html', { includeShadowRoots: true });
$body.replaceChildren(fragment);

See https://web.dev/declarative-shadow-dom/#parser-only and https://web.dev/declarative-shadow-dom/#serialization for more details.

[itsjwala]

Hey @mmun,

• I understand the difference now with the context of how we're capturing the DOM.
• Though a thing to note is $scoped.children won't work for shadow host, say for example

Assuming we use shadow host as a CSS selector, in this case, it would be popup-info

$scoped.children will reveal an empty array.

• This wouldn't work in the current master as well.
• Thanks for reporting this Addepar team 👍
• we'll merge this change in upstream by next week, currently to workaround this you can continue using our upstream CLI(this will help us fix and iron out any bugs) and your ember fork.

[mmun]

Good point! For the ember use case, the $scoped element is usually a boring <div> container but you raise a good point in the general case.

[itsjwala]

@mmun @c69-addepar please give @percy/ember@v4.1.0 a try.

[c69-addepar]

Hi @itsjwala , after trying @percy/ember@4.1.0 the errors are exactly the same as before.

NotAllowedError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed

[itsjwala]

Can you share debug logs of one such failed snapshot?

[c69-addepar]

Hi @itsjwala,

i have tried the recent alpha today

    "@percy/cli": "1.19.2-alpha.0",
    "@percy/ember": "^4.2.0",

Same error as before.

Can you share debug logs of one such failed snapshot?

[percy:client] Creating snapshot: [Visual Acceptance] Analysis | Reordering, adding, and removing columns through modal are applied to table (after click Run)... (1ms)
[percy:core] Snapshot taken: [Visual Acceptance] Analysis | Reordering, adding, and removing columns through modal are applied to table (after click Run) (502ms)
[percy:core:page] Page closed (7ms)
[percy:client] Uploading resources for 25113681... (220ms)
[percy:client] Uploading resource: /percy.1676398343632.log... (1ms)
[percy:client] Uploading resource: https://localhost:8444/176737191684/tests/index.html?hidepassed&filter=%5Bvisual%20acceptance%5D... (0ms)
not ok 4 Chrome 109.0 - [12222 ms] - [Visual Acceptance] Analysis: Reordering, adding, and removing columns through modal are applied to table
    ---
        stack: >
            Error: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed
                at addStyle (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:16:687)
                at attachStyles (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:16:958)
                at updateComponent (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:129:1)
                at eval (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:127:648)
                at then (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:143:342)
                at dispatchHooks (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:127:631)
                at Array.dispatch (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:127:20)
                at consume (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:270:817)
                at flush (webpack://__ember_auto_import__/./node_modules/@addepar/apl-wc/dist/esm/index-486da275.js?:274:2)
                at https://localhost:8444/assets/vendor.js:105946:7
        message: >
            global failure: NotAllowedError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed
        negative: >
            false
        browser log: |

[itsjwala]

Hey @c69-addepar,

• This seems to be Stencil's internal error - ref

  • we cannot use document fragment object instead of document object in our serialization since their API differs.

• Does this cause Percy's build failure? or it just logs the error?

  • I don't see a stack error trace thrown from Percy's code, IMO we should raise it with the Stencil team.

• We dug into the possible cause of this issue earlier.

  • This happens when we append the document fragment into the cloned document - here
  • This triggers connected callbacks of the Custom Elements that are defined in the frameworks (Stencil here)
  • 2 workarounds were Approach a. use document fragment(ruling this out due to API difference with document) Approach b. create a clone of the custom element which doesn't have connected callback (we couldn't find any API which would help us override connected callbacks of an existing custom element.)
  • Approach b. was tried by the h2mltocanvas library author - ref, though we have less confidence in this approach as of now.

[itsjwala]

Hey @c69-addepar, The above issue might be fixed please try version v1.19.2