Support component slots / children with new shortcode naming
opened this issue · comments
Is your feature request related to a problem? Please describe.
We currently register a new shortcode for every component renderer: react
, vue
, svelte
, etc. This can introduce:
- Potential naming conflicts with other shortcodes used in your project
- Cause a cambrian explosion of variants once we add slots / children. We can't add a paired shortcode of the same name as a non-paired version. To avoid conflicts, we'll need to introduce new variants:
slottedReact
,slottedVue
,slottedSvelte
,slottedPotato
, etc.
Describe the solution you'd like
We already choose the correct renderer for component pages based on file extension. So let's do the same for shortcodes!
For components without children, use component
. We'll infer which renderer to use based on the file extension:
{% component 'Slinky.vue', hydrate='eager', data=coolData %}
For components with children, use slottedComponent
:
{% slottedComponent 'Navigation.svelte', hydrate='lazy' %}
<a href="/">Home</a>
<a href="/about">About</a>
{% endslottedComponent %}
...and those children are accessible either via children
in JSX, or an unnamed slot
in Svelte or Vue. Support for named slots are out of scope.
Describe alternatives you've considered
- Variant names for every individual renderer. This isn't preferred because of all the reasons from the first section
- A more verbose name for
slottedComponent
, likecomponentWithChildren
. This is a) more to type and b) locks us into only supporting unnamed children / slots. Ideally,slottedComponent
will offer a named slot solution in the future
Additional context
Children will be passed as a string of unprocessed HTML. This could cause some unexpected behavior, like not supporting markdown syntax from a markdown file. This is a well-documented gotcha in 11ty that's now solved with renderTemplate
:
# I'm in markdown!
{% slottedComponent 'Dropdown.jsx' %}
{% renderTemplate 'md' %}
Switching back to markdown for these children.
- Love the freedom to use markdown on a whim
- Can't get enough of these component wrappers
{% endrenderTemplate %}
{% endslottedComponent %}