slot with same name within template

[sashafirsov]

Introduction

The slot with same name in the HTML 5 TEMPLATE is not supported by current browser implementations which blocks several use cases essential for declarative HTML programming. It is also a blocker for declarative web application concept.

Use Cases

• Templates often are used for content which could have repeated value from the same data section. The person name in email template is a perfect sample where the person name used in "to" and "letter text" section. This case is easily implemented in various templated engines like handlebars, Lit, or React, but not by TEMPLATE + SLOT tags.

• In static site templates the slot can be used to define the URL root for multiple DOM elements. For example, the link and image.

Goals

• add the support of multiple slots with same name into HTML 5 standard
• provide test cases and polyfill.
• file the feature request in chromium, FF, etc.

Non-goals (Optional)

• propagation of slots into attribute, will be addressed in separate proposal.

Proposed Solution

Without being too prescriptive, articulate a specific way (procedurally, algorithmically, declaratively) that a new or current web technology solves an existing problem or challenge.

• add the assignedSlots as complimentary to Element.assignedSlot

Examples (Recommended)

<div>
    <template shadowroot="open">
        <ol>
            <li><slot name="q">Q1</slot></li>
            <li><slot name="q">Q2</slot></li>
            <li><slot name="q">Q3</slot></li>
        </ol>
    </template>
    <i slot="q">A</i>
    <i slot="q">B</i>
    <i slot="q">C</i>
</div>

produces	expected
ABC	ABC
Q2	ABC
Q3	ABC

Live example: https://jsfiddle.net/suns2015/g0ukh81t

Alternate Approaches (Optional)

Not available.

Privacy & Security Considerations

N/A

Let’s Discuss

Declarative Web Application

[sashafirsov]

the case of reusing same slot in template is addressed in Functionally complete declarative templating proposal as a part of DCE/DWA stack.