chore: update documentation for better extending

This commit is contained in:
okadurin 2025-01-16 16:35:00 +01:00 committed by Thijs Louisse
parent 2155e455ee
commit e6a33d92aa

View file

@ -25,8 +25,13 @@ Large or complex forms might need to be split up into multiple files. This compo
- shared templates - shared templates
- (web) components - (web) components
In the latter case: make sure that your components don't have a shadow root. In the latter case: make sure that your components don't have a shadow root. This can be achieved by rendering into Light DOM. The form registration mechanism relies on light dom by design: as soon as you do start to use shadow roots, you will notice that your form components won't register themselves anymore to their parents.
This can be achieved in LitElement by providing the host as render root:
> Today, rendering to light dom is the only way to [stay accessible](../../fundamentals/rationales/accessibility.md#shadow-roots-and-accessibility).
### Example of a component that renders into Light DOM
Rendering into Light DOM can be achieved in LitElement by providing the host as render root:
```js ```js
class MySubForm extends LitElement { class MySubForm extends LitElement {
@ -63,10 +68,6 @@ class MyForm extends LitElement {
} }
``` ```
> Today, rendering to light dom is the only way to [stay accessible](../../fundamentals/rationales/accessibility.md#shadow-roots-and-accessibility).
The registration mechanism relies on light dom by design: as soon as you do start to use shadow roots, you will notice that your form components won't register themselves anymore to their parents.
## Extending form components ## Extending form components
Extending form components is not recommended for Application Developers: it should be left to the team that creates a Design System (Subclassers). Extending form components is not recommended for Application Developers: it should be left to the team that creates a Design System (Subclassers).