Allows slots to ignore surrounding whitespace

[knowler]

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]

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.

• https://drafts.csswg.org/selectors/#empty-pseudo

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?