ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update documentation for better extending

Browse source
This commit is contained in:
okadurin 2025-01-16 16:35:00 +01:00 committed by Thijs Louisse
parent 2155e455ee
commit e6a33d92aa
1 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
docs/guides/how-to/create-a-form.md
View file

@ -25,8 +25,13 @@ Large or complex forms might need to be split up into multiple files. This compo
- shared templates
- (web) components
In the latter case: make sure that your components don't have a shadow root.
This can be achieved in LitElement by providing the host as render 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.
> 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
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 is not recommended for Application Developers: it should be left to the team that creates a Design System (Subclassers).