Is there a ShadowDOM polyfill for use with document-register-element?

[trusktr]

I may have asked this somewhere before, but I'm making a specific issue for it.

Is there a ShadowDOM polyfill that can be used along with document-register-element?

The webcomponents CE polyfills also comes with a compatible SD polyfill, but so far, I'm not sure if it works with document-register-element, and they do not provide any builds that ship without CE. All of the builds that include the SD polyfill also include the CE polyfill, which obviously would conflict with document-register-element.

Have you gotten any ShadowDOM polyfill working with document-register-element? If so, which one and do you have an example?

[yugrinkov]

The same question is interested. Thanks!

[WebReflection]

there is an attachShadow poorlyfill I'd suggest.

[trusktr]

@yugrinkov If it helps, I ended up using WebComponents.js (for Custom Elements and ShadowDOM "polyfills"), but instead of using their custom-elements-es5-adapter.js file, it was much easier to work with @WebReflection's babel-plugin-transform-builtin-classes which accomplishes the same goal as custom-elements-es5-adapter.js. If you're trying to make a single build file that will work in all browsers rather than specific build files for different browsers, then custom-elements-es5-adapter.js will be very difficult to work with compared to babel-plugin-transform-builtin-classes.

[WebReflection]

just in case it helps choosing, Google is sponsoring this polyfill instead of simply using theirs :wink:

The Shadow DOM poorlyfill I've suggested is also much lighter than the one WebComponents provides and, for what I could test, easier to use and widely compatible.

[trusktr]

I appreciate your efforts, but I really needed a polyfill that would have <slot> functionality, because I'm making composable components with ShadowDOM slots.

[WebReflection]

yes, <slot> is not there yet, that's a very valid point