Hilla Documentation

Working With Shadow DOM

Hilla components and views are web components based on Lit. By default, Lit encapsulates the content of components inside of a Shadow DOM, which prevents outside CSS from leaking in and component CSS from leaking out. You can read more about Light and Shadow DOM in the Component Basics section.

Advantages and Disadvantages of Shadow DOM

Shadow DOM is a powerful web platform feature that makes it easy to build fully encapsulated, reusable components. This strict level of encapsulation can be challenging when building applications, because it makes it more difficult to apply the theme consistently across views. Shadow DOM can also interfere with some web crawlers and marketing tools. Because of this, Hilla does not use Shadow DOM by default.

Views and Layouts

Hilla provides two base classes for components: View and Layout. You can import them from ./frontend/views/view.ts.

Use View for all application views that do not need to accept child components. Use Layout for all components that act as layouts by accepting child components through <slot>.

See Styling With CSS to learn how to apply CSS to View and Layout components.