Shadow DOM

By default WebComp components don't use Shadow DOM because polyfill for it in some browsers may be a bit expensive.

If you know what you doing and want to use Shadow DOM, all you need to do is pass an options object with useShadow when registering:

WebComp.register(MyComponent, 'my-component', {
useShadow: 'open',
});

Modes

  • useShadow: 'open' will enable Shadow DOM that is accessible from outside JavaScript.

  • useShadow: 'closed' will enable Shadow DOM that is unaccessible and unchangeable from JavaScript.