Allows slots to ignore surrounding whitespace
knowler opened this issue · comments
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.