The iron-icons element prevents functions from other elements on the page with the same id from working.
Expected outcome
iron-icons to be scoped inside it's own component and not being put into the lightdom where it can be accessed by other functions/elements that use a querySelector.
Actual outcome
When using iron-icons@3.0-preview (to be used with Polymer 3) the icons get placed in the head with the <g id="search">...</g> directly in the dom. Any other elements or non-webcomponents functions that use the same id for a querySelector will get the iron-icon instead.
Live Demo
Can't create a demo right now (no online editor seems to support Polymer 3?)
Steps to reproduce
Put a iron-icon element in the page.
Put a other non-polymer element in the page that uses a querySelector that matches the id of a the iron-icon icon used
The non-polymer element querySelector returns the iron-icon g element with the matching ID
Browsers Affected
Have not checked all browsers, but is effecting Chrome at least (and probably all other browsers).
Description
The
iron-iconselement prevents functions from other elements on the page with the same id from working.Expected outcome
iron-iconsto be scoped inside it's own component and not being put into the lightdom where it can be accessed by other functions/elements that use aquerySelector.Actual outcome
When using
iron-icons@3.0-preview(to be used with Polymer 3) the icons get placed in the head with the<g id="search">...</g>directly in the dom. Any other elements or non-webcomponents functions that use the same id for a querySelector will get theiron-iconinstead.Live Demo
Can't create a demo right now (no online editor seems to support Polymer 3?)
Steps to reproduce
iron-iconelement in the page.iron-icon iconusediron-icon gelement with the matching IDBrowsers Affected
Have not checked all browsers, but is effecting Chrome at least (and probably all other browsers).