Rookie mistakes developing Web Components in Polymer

Developing Web Components is both fun as well as frustrating at times. Maybe it’s the fact that I’m so used to coding typed languages (C# & Java) with loads of compiler help, or maybe it’s the fact that debugging web pages aren’t always a breeze combined with that Web Components are still fairly raw. But I often found myself scratching my chin thinking “What the …?”. Here’s a short list of three confounding issues you might run in to when starting to develop Web Components and using Polymer.

1. Nothing is being rendered on screen, nothing!

Q: I just added a new component and now nothing is being rendered on my screen. I’m not kidding, NOTHING! My entire site is just white, there seems to be elements there when I mouse over but they are all just withe?!?!

A: This is done by declaring a new Polymer element that hasn’t got a noscript attribute, has a script tag but it lacks a call to the Polymer method. See code snippet below.

<polymer-element name="demo-element">
    <template>
        some awesome html code
    </template>

    <script>
        //scary empty script tag!!
    </script>
</polymer-element>

2. My new element isn’t just lacking style, it’s refusing all styling!

Q: I have this cool new Polymer element that I just made and it’s not being styled by the CSS I defined in it, what gives?

A: This is probably due to a slightly misplaced style tag. It’s easy to miss that the style tag must be located within the template tag and that it can’t be located just below the Polymer element declaration. See code snippet below.

<polymer-element name="demo-element">
    <style>
        /*this is a misplaced style tag, it should be within the template tag below!*/
    </style>

    <template>
        some awesome html code
    </template>

    <script>
        //scary empty script tag!!
    </script>
</polymer-element>

3. Console keeps nagging: Uncaught Already registered (Polymer) prototype for element my-element

Q: I have this great app written all in web components, but I see a lot of errors in the console saying “Uncaught Already registered (Polymer) prototype for element new-list”, what gives?

A: This is what happens if you forget to remove the noscript attribute as you later register the element with the Polymer method. I often start first draft of my elements by defining noscript on them and all too often I forget to remove the attribute as the elements evolve. 🙁 See code snippet below.

<polymer-element name="demo-element" noscript>
    <template>
        <style>
            /*this is a correctly placed style tag!*/
        </style>

        some awesome html code
    </template>

    <script>
        Polymer({
            //some rad JavaScript code!!
        });
    </script>
</polymer-element>