It would be great to have a global configuration option to disable Shadow DOM for all components, something like:
import component from 'alpinejs-component'
Alpine.plugin(component.configure({ shadowDOM: false }))Why this would be useful:
- Many projects use
x-component as a partials/include mechanism, not for encapsulation. Shadow DOM is overhead in that case.
- Global styles (Tailwind, design system tokens, resets) don't penetrate shadow DOM.
x-component-styles helps but it's a workaround, not a solution.
$refs don't resolve across shadow roots.
A global toggle would keep the current behavior as default while giving projects that don't need encapsulation a clean opt-out.
It would be great to have a global configuration option to disable Shadow DOM for all components, something like:
Why this would be useful:
x-componentas a partials/include mechanism, not for encapsulation. Shadow DOM is overhead in that case.x-component-styleshelps but it's a workaround, not a solution.$refsdon't resolve across shadow roots.A global toggle would keep the current behavior as default while giving projects that don't need encapsulation a clean opt-out.