erikringsmuth/app-router

Allow vulcanizing without having to specify the element attribute

Open

#22 opened on Sep 12, 2014

View on GitHub
 (9 comments) (0 reactions) (0 assignees)HTML (608 stars) (83 forks)batch import
(・_・ヾbughelp wanted

Description

Just a minor thing, it seems the element tag needs to be set for an imported component for vulcanizing to work even if the imported component has the same name as the file.

For example, I have a component in a file name home-page.html exported with a name of 'home-page'.

This code:

<app-route path="/" import="components/home-page.html"></app-route>

Results in polymer throwing an error when loaded after vulcanization:

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'.

This code fixes it:

<app-route path="/" import="components/home-page.html" element="home-page"></app-route>

Cheers!

Contributor guide

Tech stack
htmljavascriptweb components
Domain
frontendtooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
polymer basicsapp router usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
The issue occurs when vulcanizing components without the 'element' attribute. Investigate the 'app route' component's handling of the 'import' attribute and the vulcanization process in the build pipeline. Check if the fix is to default the element name to the filename or to require the attribute. The error suggests a DOM hierarchy issue when the component is not properly named.