missing support for web components

[mattlohkamp]

As written, this polyfill only addresses <detail> support in the light DOM - i.e. <style>s added to document.head will not apply to elements encapsulated in the shadow DOM that comes standard with web components.

Just off the top of my head, allowing the polyfill functionality to be manually initialized with context passed in as an argument, might be a fairly direct fix - make the master function an export, and the implementation looks something like this:

import dePolyfill from 'details-element-polyfill';
window.customElement.define('my-element', class MyElement extends HTMLElement {
 this.attachShadow({mode:'open');
 dePolyfill(this.shadowRoot);
});

[javan]

Out of curiosity, are there browsers with Shadow DOM support that don't support <details>?

[mattlohkamp]

I don't think so. I need to support IE11 so I'm knee-deep in polyfill land though. 😓

edit - and actually, a lot of default windows 10 installation users are still stuck with Edge v44, which needs polyfills for web components and details/summary element stuff as well. Once Edge v79+ is a compulsory windows update that'll start to change.