Skip to content
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.

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

Using Slots shouldn't require template tags #7

Open
gone opened this issue Feb 10, 2022 · 1 comment
Open

Using Slots shouldn't require template tags #7

gone opened this issue Feb 10, 2022 · 1 comment

Comments

@gone
Copy link
Contributor

gone commented Feb 10, 2022

Consider the example from the documentation:

<x-panel>
  <!-- Named Slot -->
  <template slot="header">
    <h1>Panel Header</h1>
  </template>
  <!-- Default Slot -->
  <template>
    <p>Panel Content</p>
  </template>
</x-panel>

This could be more concisely expressed as:

<x-panel>
  <!-- Named Slot -->
    <h1 slot="header">Panel Header</h1>
  <!-- Default Slot -->
    <p>Panel Content</p>
</x-panel>

The Spec says:

Note: An unnamed <slot> will be filled with all of the custom element's top-level child nodes that do not have the slot attribute. This includes text nodes.

So this should probably work too:

<x-panel>
  <!-- Named Slot -->
    <h1 slot="header">Panel Header</h1>
  <!-- Default Slot -->
    <p>Panel Content</p>
    <p> some more content </p>
</x-panel>
@allain
Copy link
Owner

allain commented Feb 11, 2022

The reason for this is that Alpine might have already rendered the content if there's no template tag. Pulling it out to fill the slot would cause the elements that are generated to be considered part of the template too, leading to duplicate content.

In the case you gave of the static html content, it would actually work as is. The before and after (Alpine) content is the same so, it doesn't matter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants