[ShadyDOM] `slot.insertBefore` throws `NotFoundError`

[michael-england]

Description

Error thrown when calling insertBefore on a slot

Live Demo

https://jsfiddle.net/michael_england/uqvrcnks/

Steps to Reproduce

1. Create my-element with the following:

customElements.define('my-element', class extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = '<button>click me!</button><slot><div /></slot>';
    
    var slot = this.shadowRoot.querySelector('slot');
    var count = 0;
    this.shadowRoot.querySelector('button').addEventListener('click', function () {
    	count++;
    
      var div1 = document.createElement('div');
      div1.innerHTML = count + ": first div";
      slot.insertBefore(div1, slot.firstChild);
      
      var div2 = document.createElement('div');
      div2.innerHTML = count + ": second div";
      slot.insertBefore(div2, slot.firstChild);
    });
  }
});

2. Append my-element to document.body
3. Click the click me! button
4. Note only one element is inserted into the slot rather than two.

Expected Results

No error is thrown, code continues to run. In the case of this example, two divs should be added to the slot as children.

Actual Results

Error is thrown, code stops executing. In the case of this example, only one div is added to the slot as a child.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [x] Edge
• [ ] Safari 9
• [ ] Safari 8
• [x] IE 11

Versions

• webcomponents: v2.2.7

[dfreedm]

Duplicate of #144

[dfreedm]

Actually, this is probably about the <slot> element not existing in the composed DOM.

[benoitjchevalier]

@dfreedm do you have a sense of the scale of the fix? Happy to do a PR or fork but this doesn't look like a straightforward fix

Edit: Actually might have been fixed by #266 ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.