[w3c/webcomponents] Use Case: Would like multiple use of slot by same name (#778)

I haven't been able to find explicit documentation on slot name use restrictions.

I checked
https://html.spec.whatwg.org/multipage/scripting.html#htmlslotelement

Anyway, I think it would be useful to be able to populate slots of a web component from a single Slotable.

My testcase below, when run from a scratchpad against `about:newtab` in Firefox Nightly, results in only the first slot getting assigned the slotted host node.

What is the correct approach to "parameterize" a web component instance with a single piece of recurring information short of creating uniquely named slots and providing slotables for each?

```
FOO Overview

Much has been said about SUBJECT.

SUBJECT References
```

```javascript
'use strict';

class SlotTestUI extends HTMLElement {
  constructor() {
    try {
      super();
      this.shadow = this.attachShadow({ mode: 'open' });
      this.shadow.innerHTML = `
<h2><slot id="slot1" name="subject">SUBJECT</slot> Overview</h2>
<p>Much has been said about <slot id="slot2" name="subject">SUBJECT</slot>.</p>
<h2><slot id="slot3" name="subject">SUBJECT</slot> References</h2>
        `;
    }
    catch (e) {
      console.log(e);
    }
  }
  connectedCallback() {
    try {
    }
    catch (e) {
      console.log(e);
    }
  }
}

class SlotTestHostUI extends HTMLElement {
  constructor(api_name, generator_name) {
    try {
      super();
      this.shadow = this.attachShadow({ mode: 'open' });
      this.shadow.innerHTML = `
<slot-test>
  <span slot="subject">FOO</span>
</slot-test>
`;
    }
    catch (e) {
      console.log(e);
    }
  }
  connectedCallback() {
    try {
    }
    catch (e) {
      console.log(e);
    }
  }
}

if (!customElements.get('slot-test')) {
  customElements.define('slot-test', SlotTestUI);
}

if (!customElements.get('slot-test-host')) {
  customElements.define('slot-test-host', SlotTestHostUI);
}

let sth1 = new SlotTestHostUI();
document.body.appendChild(sth1);


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/778

Received on Friday, 7 December 2018 19:21:12 UTC