Slot values in attributes and attributes parts

[sashafirsov]

Introduction

HTML template in order to be complete should include the ability to pass slot value as tag attribute value or its part.

Blocker for declarative web application concept.

Use Cases

In static site there is a need to pass same value into several attributes and HTML elements. Often there is a root path common for the URLs. In the sample bellow

• title is passed as alt attribute the image, as a title attribute in the link, and as h6 text.
• the href attribute comprise the root-url and link-path slots.
• the src attribute comprise the root-url and link-path slots.

<div title="image link">
    <template shadowroot="open">
        <a>
            <attribute name="title" ><slot name="title">undefined image</slot></attribute>
            <attribute name="href"><slot name="root-url">./</slot><slot name="link-path">not-defined.svg</slot></attribute>
            <img id="image-id"/>
            <attribute 
                  name="src" 
                  for="image-id"
                  ><slot name="root-url">./</slot><slot name="image-path" >not-defined.svg</slot></attribute>
            <attribute 
                  name="alt" 
                  for="image-id"
                  ><slot name="title">undefined image</slot> image</attribute>
             <h6><slot name="title">undefined image</slot></h6>
        </a>
    </template>
    <i slot="root-url">https://unpkg.com/</i>
    <i slot="link-path">[email protected]/dist/PokeApi-Explorer.html</i>
    <i slot="image-path">[email protected]/sprites/pokemon/other/dream-world/1.svg</i>
    <i slot="title">Bulbasaur</i>
</div>

Goals

A list of what this proposal must do in order to be considered successful.

• expose ATTRIBUTE as HTML 5 tag with name of attribute in parent element.
• allow for attribute in ATTRIBUTE tag to define the attribute in self-closing element which can not embed the ATTRIBUTE tag within.

Non-goals

no need to change the slot logic itself.

Proposed Solution

Change HTML parser to permit ATTRIBUTE as a tag. Keep the same kind of reference to attributed element by for attribute as in LABEL tag.

Alternate Approaches

The SLOT itself could have the attribute and for attributes and would serve the slot to element attribute propagation.

<a><slot attribute="href"></slot>...
    <img id="image-id" />
    <slot for="image-id" attribute="src">https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world/1.svg</slot>
</a>

This approach would not allow to define the part of attribute though.

Privacy & Security Considerations

N/A ?

[sashafirsov]

slots values in attribute part is addressed by Functionally complete declarative templating proposal.

The DCE implementation POC in action as a sample

The slots are part of payload

<input placeholder="🐇❤️{//*[@slot='slot2']}"/>