Skip to content

RFC: Dual light/shadow components #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nolanlawson wants to merge 6 commits into
base: master
Choose a base branch
from
Open

RFC: Dual light/shadow components #77

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
804220b
RFC: Dual light/shadow components
nolanlawson Feb 8, 2023
728c1ce
fix: add clarifications
nolanlawson Feb 8, 2023
7839d3a
fix: fix typo
nolanlawson Feb 8, 2023
2fc6ca5
fix: add lwc:external
nolanlawson Feb 9, 2023
8e1e974
fix: instantiation wording
nolanlawson Feb 9, 2023
ba1403f
fix: add inheritance
nolanlawson Feb 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 50 additions & 1 deletion text/0000-dual-light-shadow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,8 @@ it can also be applied to LWC components referenced inside a template:
</template>
```

When used in this way, the value of `lwc:render-mode` can only be a static string, and it can only be `"light"` or `"shadow"`.
When used in this way, the value of `lwc:render-mode` can only be a static string. It can be set to `"light"` or `"shadow"`,
which controls the mode that the child component renders in.

If `"dual"` is used in this context, a compile-time error is thrown:

Expand All @@ -129,6 +130,54 @@ If `"dual"` is used in this context, a compile-time error is thrown:
</template>
```

Only three values are accepted in this context: `"light"`, `"shadow"`, or `"inherit"`. Any other value will throw a compile-time error.

### Inheritance

`"inherit"` is a special value of `lwc:render-mode` that can only be used in the context of a child LWC component:

```html
<template lwc:render-mode="dual">
<x-component lwc:render-mode="inherit"></x-component>
</template>
```

This instructs the `<x-component>` to render using whatever mode the parent component is using – either shadow or light. If `<x-component>` is not a dual-mode component, then a runtime error will be thrown.

For the parent component, however, `"inherit"` can be used in non-dual-mode components as well as dual-mode components:

```html
<template lwc:render-mode="light">
<!-- x-component will render as light -->
<x-component lwc:render-mode="inherit"></x-component>
Copy link
Contributor

@caridy caridy Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

two main comments:

<x-component lwc:render-mode="inherit"></x-component>
it could be <x-component lwc:render-mode="dual"></x-component> and it will work the same, it does the same as inherit but without introducing yet another token.

it seems to me that this should be an error, if you're choosing the mode in the template, why using inherit down here? you should be specific, because you have chosen the context in which this mode will operate by doing it at the template level. you're not typing less, you're not gaining anything... it is now just more ambiguous for the developer to try to remember what mode the template is running (meaning scroll up).

Copy link
Contributor Author

@nolanlawson nolanlawson Feb 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it could be <x-component lwc:render-mode="dual"></x-component> and it will work the same, it does the same as inherit but without introducing yet another token.

We could do that, yeah. I don't have a strong opinion.

you're not typing less, you're not gaining anything

Are you saying that the "inherit" behavior should be implied by omitting the lwc:render-mode on the <x-component> altogether? This is fine, except that it introduces ambiguity on how a component behaves depending on the template it is rendered in. In a light/shadow template, it will be whatever default the component author (in this case the author of <x-component>) chose, whereas in a dual template, it will inherit from that template. To me, this is more confusing than making the omission of lwc:render-mode always mean "whatever default the component author chose."

</template>
```

In this case, the same rules apply – the child component uses the mode inherited from its parent.

The above example is equivalent to:

```html
<template lwc:render-mode="light">
<!-- x-component will render as light -->
<x-component lwc:render-mode="light"></x-component>
</template>
```

For the purposes of inheritance, `<slot>` contents are considered to be children of the slotting component, not the
slottable component.

```html
<template>
<x-slottable>
<!-- Mode is inherited from this template, not from x-slottable's template -->
<x-component lwc:render-mode="inherit"></x-component>
Copy link
Contributor

@caridy caridy Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in this example, who dictates the mode? how can an author look at this code an know? what is the process of knowing what mode this is going to run on?

Copy link
Contributor Author

@nolanlawson nolanlawson Feb 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in this example, who dictates the mode?

The top-level <template> on Line 171 dictates the mode. In this case, it will be shadow mode, because there is no render-mode on line 171.

how can an author look at this code an know?

They would need to glance up to the top <template> in the template they are currently authoring. 🙂

what is the process of knowing what mode this is going to run on?

Again, glance up top. 🙂 And if <x-component> does not support dual mode, you will get a runtime error.

</x-slottable>
</template>
```

### Coherence

If a template is declared to be `lwc:render-mode="dual"`, then the corresponding component must also have
`static renderMode = 'dual'`, and vice versa.

Expand Down