Assertion Error thrown

[mattyclarkson]

I have the following component, which creates an SVG three line icon used for menus in modern UIs:

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="nav-button">
  <template>
    <style>
      :host {
        display: block;
        background-color: red;
      }
      :host #icon line {
        stroke: rgb(255, 255, 255);
        stroke-linecap: round;
        stroke-width: 4;
      }
      :host #icon defs line {
        stroke: rgb(255, 255, 255);
        stroke-linecap: round;
        stroke-width: 4;
      }
    </style>
    <svg id="icon" version="1.1" width="32px" height="32px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <defs>
        <line id="line" x1="0" y1="0" x2="18" y2="0" />
      </defs>
      <use xlink:href="#line" x="6" y="8" />
      <line id="middle" x1="6" y1="16" x2="24" y2="16" />
      <line id="bottom" x1="6" y1="24" x2="24" y2="24" />
    </svg>
  </template>
  <script>
    (function(undefined) {
      'use strict';
      Polymer('nav-button', {
        ready: function() {
        }
      });
    }())
  </script>
</polymer-element>

When hovering over the first line (the one that is instantiated with the <use> SVG element, Errors are repeatedly thrown from wrappers.js:30, with the following callstack:

wrapper.js:30:

function assert(b) {
  if (!b)
    throw new Error('Assertion failed');
};

wrapper.js:290:

function wrap(impl) {
  if (impl === null)
    return null;

  assert(isNative(impl));
  return impl.polymerWrapper_ ||
      (impl.polymerWrapper_ = new (getWrapperConstructor(impl))(impl));
}

event.js:190:

function dispatchOriginalEvent(originalEvent) {
  // Make sure this event is only dispatched once.
  if (handledEventsTable.get(originalEvent))
    return;
  handledEventsTable.set(originalEvent, true);

  return dispatchEvent(wrap(originalEvent), wrap(originalEvent.target));
}

This is solved by adding the noscript tag to the Polymer element or replacing the lines with direct instantiation (<line>).

Is Polymer scanning the <use> and digging out the href for something?

[dfreedm]

@arv Can you take a look at this w.r.t SD Polyfill?

[arv]

Looking, <svg:use> is crazy town.

<svg:use> more or less duplicates shadow dom and custom elements. SVGElementInstance uses its own parentNode, firstChild, lastChild, previousSibling, nextSibling and childNodes which are all SVGElementInstance and SVGElementInstanceList respectively. The good thing though is that these are immutable so we do not need to support appendChild etc.