question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Overriding HTMLElement.attachShadow breaks other polyfills

See original GitHub issue

Describe the bug attachShadow is defined (per spec) on Element but this polyfill sets it on HTMLElement.prototype If anyone else later changes Element.prototype.attachShadow, their code is never called (on HTMLElements), because this library’s polyfill takes precedence, and revert to the native attachShadow code (captured during init).

To Reproduce https://codesandbox.io/s/attachshadow-bug-demo-w33wp Loading it on Chrome shows “Should be called” on console (this library doesn’t patch attachShadow). Loading it on Firefox doesn’t. Switching the order of polyfills fixes the issue for Firefox (need to reload the sandbox for the prototypes to be reset)

Expected behavior attachShadow being defined on Element as per the spec, that’s where it should be defined to play fine with other polyfills/hooks.

Additional context Polyfill confirmed to break if applied after this one: @lwc/synthetic-shadow

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
calebdwilliamscommented, Sep 25, 2020

This is fixed in version 2.4.2. Thanks for bringing this to my attention.

0reactions
gluckcommented, Sep 26, 2020

Exactly, but it does so only for lwc components, for other elements it reverts to native attachShadow, so this polyfill would still work for those.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Shadow DOM v1 - Self-Contained Web Components
With closed mode, there's no way for users to override defaults and tweak styles. Being able to access the component's internals is super ......
Read more >
Override Element.prototype.attachShadow using Chrome ...
I've read in several references that you can override Element.prototype.attachShadow on the document startup in order to change the Shadow ...
Read more >
Encapsulating Style and Structure with Shadow DOM
After implementing the new open shadow root, you might notice now that our element is completely broken when we try to run it:...
Read more >
"open-stylable" Shadow Roots · Issue #909 - GitHub
The point of inheriting from the scope above is that it's composable and doesn't break other element's encapsulation.
Read more >
Element.attachShadow() - Web APIs | MDN
The Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found