javascriptpolymershadowboxweb-component

Polymer: Instance polymer element from another element


I'm wondering how could I instance a Polymer element when I click on another element. Is there a way to instance window-base from dock-icon? (code down). I though I could use the constructor every element has but I can't figure out how this works. How could I pass a variable to that constructor.

Code of the two elements involved:

<polymer-element name="dock-icon" attributes="name" on-click="{{click}}">
<template>
    <link rel="stylesheet" href="dock-icon.css">
</template>
<script>
    Polymer('dock-icon', {
        name: "",
        click: function (event, detail, sender) {
            alert(this.name);
            //instance <window-base> and pass name parameter
        }
    });
</script>

Polymer element that has to be instanced

<polymer-element name="window-base" attributes="name height width left top">
<template>
    <link rel="stylesheet" href="window-base.css">
    <div id="box">
        <header id="header"><h2>{{name}}</h2></header>
    </div>
</template>
<script>
    Polymer('window-base', {
        name: "name",
        //more stuff here
    });
</script>

Thanks


Solution

  • This should be straightforward as:

    var el = document.createElement('window-base');
    el.name = 'some name';