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

Allows slots to ignore surrounding whitespace #1056

Open
knowler opened this issue May 3, 2024 · 1 comment
Open

Allows slots to ignore surrounding whitespace #1056

knowler opened this issue May 3, 2024 · 1 comment

Comments

@knowler
Copy link

knowler commented May 3, 2024

Problem

Given this DSD markup, the default content of the slot will never show up because the there is whitespace before and after the <template> element:

<my-element>
  <template shadowrootmode=open>
    <slot>Fallback</slot>
  </template>
</my-element>

In order to get around this one needs to write their markup without any whitespace:

<my-element><template shadowrootmode=open>
  <slot>Fallback</slot>
</template></my-element>

In some cases, some have opted to note this with a comment:

<my-element><!-- no whitepsace 
--><template shadowrootmode=open>
     <slot>Fallback</slot>
   </template><!-- no whitespace 
--></my-element>

While this is an easy fix, it’s not always apparent and in some cases the formatting makes the markup harder to read.

An idea for a solution

An attribute for the <slot> element to indicate that surrounding whitespace should be ignored might be one solution for this:

<my-element>
  <template shadowrootmode=open>
    <slot trimwhitespace>Fallback</slot>
  </template>
</my-element>

(Not a great name, I know.)

This could generally improve the developer experience of writing Web Components, though it still does require knowledge that whitespace is slotted.

I acknowledge that this issue becomes less of a problem once we get declarative custom elements, since authors don’t need to write templates for every instance of those elements.

@Westbrook
Copy link
Collaborator

Interestingly, even the :empty selector in CSS has recently had its spec updated to act in a was similar to this:

The :empty pseudo-class represents an element that has no children except, optionally, document white space characters.

It's unclear whether any browsers will ever implement such an optional spec, but maybe pushing for normalization to that brighter future in this area would be of benefit?

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