Geek Answers Handbook

Dynamic template introduction in Polymer 1.0

I am trying to enter and display the <template>correct path in Polymer Webapp, but I have several difficulties with it. (... or maybe I misunderstood 1.0 Documentation?)

DOM manipulation documentation says:

Polymer provides a custom API for managing the DOM, so local DOM and light DOM trees are properly supported. These methods and properties have the same signatures as their standard DOM equivalents, except that the properties and methods that return a list of nodes return an Array, not a NodeList.

Note. All DOM manipulations should use this API, and not the DOM API directly on the nodes.

Therefore, I suggest that I should use the API Polymer.domeverywhere to manipulate the DOM, which makes sense to me, because in this way Polymer can stay in sync with the generated shadow DOM. No DOM.appendChild(), instead Polymer.dom().appendChild(). And manipulating the shadow DOM directly would not be a great idea ... or would it?

Imagine a simple page structure:

<body>
  <template is="dom-bind" id="app">
    <main>
      <template is="dom-bind" id="content">
        <p>Lorem ipsum dolor sit amet.</p>
      </template>
    </main>
  </template>
</body>

And the second small fragment that I can import into the page.

<template id="snippet">
  <p>Consectetur adipisici elit.</p>
</template>

This template should be replaced / indicated with #content. So let's get started.

Importing a snippet is easy. I can get it and get the DOM element.

Polymer.Base.importHref('/snippet', function(e) {
  // on success: imported content is in e.target.import

  var template = Polymer.dom(e.target.import).querySelector('#snippet');
  // until here it works, `template` is the template from my snippet
  ...

, , template#app ref template#content content... ref - ? ? , , .

var app = Polymer.dom(this).querySelector('#app'); // Works, is template#app
var app = document.querySelector('#app'); // Same result

Polymer.dom(app).appendChild(template); // will append it, but outside of the document fragment
Polymer.dom(app.root).appendChild(template); // won't do anything

Polymer.dom(app).querySelector('template'); // undefined
Polymer.dom(app.root).querySelector('template'); // undefined
app.querySelector('template'); // undefined

, . API DOM, , . - , .

EDIT: Polymer.dom(this) , Polymer.dom(app)? , , . , .

+4
1

dom ( ), Polymer.dom(this.root).appendChild.

https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api: / dom , this.root .

+2

More articles:


All Articles