Skip to content Skip to sidebar Skip to footer
Home / Custom Element / Javascript / Polymer / Web Component

Polymer: Create A "general" Custom Element

Post a Comment
I am attempting to build an element with attributes that would specify which element should take place of this element. I have a 3d-card flip element that I am using fo this purpos

Solution 1:

It’s hard to say what you are trying to achieve, but I would point at some glitches within your code and provide the working version with paper-button instead of flip-card (since I have no code of flip-card.)

TL;DR Live preview: http://plnkr.co/edit/yO865EkclZAsWBhzVSU4?p=preview

  1. The main issue with your code is that you call function addElementToDOM instead of passing it as a callback as requested by Polymer.. function() { addElementToDOM(...); } would be OK.

  2. You use hyphen-less names for custom elements (like front and back) which is conventionally prohibited. Please use dashed as in my example.

  3. You have your function polluted into global space for no reason. I put it inside an element.

  4. You were likely want to puts your custom flip-card between front and back, but there is no vestige of content select='front/back' tag inside your template.

  5. You are trying to access shadowRoot in improper way. You might want to take a look at getDistributedNodes function, but in this case it’s easier to use naming convention and address an element simply by this.$.elementHere.

  6. You are supposed to explicitly specify <body unresolved> for the polyfill to take care about unresolved things.

The working code:

<!doctype html><html><head><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"><title>Add paper button</title><scriptsrc="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script><linkhref="https://www.polymer-project.org/components/polymer/polymer.html" ></head><bodyunresolved><polymer-elementname="general-element"attributes="name address"><template><contentselect='my-front'></content><divid="elementHere"></div><contentselect='my-back'></content></template><script>Polymer ({
        addElementToDOM: function ( element_name ) {
          var elem = this.$.elementHere;
          add_elem = document.createElement( element_name );
          add_elem.appendChild(document.createTextNode('¡Hola!'));
          elem.appendChild( add_elem );
        },

        domReady: function() {
          if ( this.address && this.name ) {
            var self = this;
            Polymer.( 
              [self.address], 
              function() { self.addElementToDOM( self.name ); }
            );
          }
        }
      });
    </script></polymer-element><general-elementname="paper-button"address="https://www.polymer-project.org/components/paper-button/paper-button.html"><my-front>
          FRONT
      </my-front><my-back>
          BACK
      </my-back></general-element></body></html>

I bet, your code could be working by applying the fix #1 but I strongly suggest you to fix other glitches as well. Hope it helps.

P.S. Why on the earth you needed to dynamically your element? What’s wrong with simple

<template><contentselect='my-front'></content><!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ --><flip-card></flip-card><contentselect='my-back'></content></template>

Post a Comment for "Polymer: Create A "general" Custom Element"