template dom-if fails to render when direct child of slot in Polymer 1.x

[davidrleonard]

Description

<template is="dom-if"> fails to render and throws an error if it is the child of a <slot> element in a Polymer 1.x component's shadow DOM. If you wrap the dom-if inside another element, like a div, so it is no longer the direct child of the slot, it renders successfully.

Here's a stripped down example component that will fail to render the someVal is true text and throw an error:

  <dom-module id="example-component">
    <template>
      <slot name="stuff">
        <template is="dom-if" if="[[someVal]]">
          <p>someVal is true</p>
        </template>
      </slot>
    </template>
    <script>
      Polymer({
        is: 'example-component',
        properties: {
          someVal: {
            type: Boolean,
            value: true
          }
        }
      });
    </script>
  </dom-module>

Here's the error:

polymer-mini.html:2136 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Object.insertBefore (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer-mini.html:647:27)
    at DomApi.insertBefore (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer-mini.html:817:18)
    at HTMLTemplateElement._ensureInstance (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer.html:5408:25)
    at HTMLTemplateElement._render (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer.html:5380:6)
    at Debouncer.complete (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer-mini.html:2175:10)
    at Debouncer.boundComplete (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer-mini.html:2152:6)
    at Object._atEndOfMicrotask (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer-mini.html:2130:1)
    at MutationObserver.window.MutationObserver.observe.characterData (https://polygit.org/webcomponentsjs+v0.7.24/polymer+v1.11.2/components/polymer/polymer-mini.html:2145:15)
_atEndOfMicrotask @ polymer-mini.html:2136
window.MutationObserver.observe.characterData @ polymer-mini.html:2145

Live Demo

http://jsbin.com/zijinig/1/edit?html,console,output

Steps to Reproduce

1. Define a Polymer 1.x-style component
2. Use the <slot name="name"> to create a slot so it will be compatible with Polymer 1.x or 2.x
3. Add a <template is="dom-if" if="[[someVal]]"> with a <p>someVal is true</p> element inside of it, and set someVal to true
4. Import and use the component in a page

Expected Results

someVal is true is rendered

Actual Results

Nothing is rendered, and an error is thrown

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Polymer: v1.11.2
• webcomponents: v0.7.24

[TimvdLippe]

Confirmed that this does not occur with Polymer 2: http://jsbin.com/kovujiruvu/edit?html,console,output This looks to be an issue with Polymer.dom, which is removed in Polymer 2. Not sure if we want to fix this in 1.x. If you can submit a PR that fixes the problem with minimal impact, feel free to do so!

[michael-england]

Seems this is a polyfill issue, it's reproducible with plain javascript by calling insertBefore on a slot. I opened an issue with the polyfill: https://github.com/webcomponents/shadydom/issues/325

[stale]

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.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!