[scoped-custom-element-registry] `importNode is not a function` on latest Chromium

[tlouisse]

Description

The latest version of Chromium (120) supports ShadowRoot.prototype.createElement. However, it does not support ShadowRoot.prototype.importNode.

Since the polyfill uses the existence of ShadowRoot.prototype.createElement as a check for polyfill application, we get a console error importNode is not a function during lit render (or whenever importNode would have been called).

Example

Open this in latest Chromium (~120): https://4hrpnd-5000.csb.app/index.html

Steps to reproduce

See https://codesandbox.io/p/devbox/4hrpnd?file=%2Findex.html%3A11%2C5

1. import the polyfill
2. create a custom element with a scoped registry (we do this with the help of ScopedElementsMixin in this example )
3. bootstrap the element in html via its tag name.

Expected behavior

The polyfill discriminates between different features that make up the scoped registries spec, (so that the demo works)

Actual behavior

Prototype of ShadowRoot is not patched for importNode

Version

0.0.9

Browsers affected

• [ x ] Chrome
• [ x ] Edge
• [ ] Safari
• [ ] Firefox
• [ ] IE 11

[tlouisse]

N.B.: this only occurs when the "Experimental Web Platform features" flag has been set in chrome://flags. So it will only affect a smaller portion of people atm (developers like me that forgot this was enabled). However, it would still be good to fix it.

[jorenbroekema]

Experienced the same issue. Suddenly, my web app was completely broken, that is, every UI component stopped rendering. Fortunately could fix it by disabling the feature flag but it's very worrying that a portion of my customer-base will experience a broken site. In my opinion fixing this is quite urgent :\