Fwiw, you absolutely should use traditional DOM apis, when they serve your
purpose. Using higher-level abstractions like templates and so on for
simply DOM manipulation will only make your program slower. It's important
to remember that Polymer is not magic, the intent is only to provide
helpful sugaring for DOM itself.
The Polymer `best-practice` solution for your original problem statement is
something like the below. The idea is to use the bindings when it makes
life easier (e.g. for `modal.style`) but not to bother with it when it's
not needed (e.g. for addEventListener).
<polymer-element name="x-block" attributes="data">
<template>
<div class="block-wrapper">
<div class="plus-button"on-click="{{showModal}}">+</div>
<div id="modal" hidden?="{{!modalShown}}" style="modalTop:
{{top}}px; modalLeft: {{left}}px;">
Modal
</div>
<content select="header"></content>
</div>
</template>
/*Polymer */
<script>
Polymer({
ready: function(){
this.modalShown = false;
},
showModal: function(e) {
this.modalShown = true;
this.modalTop = e.layerY;
this.modalLeft = e.layerX;
// var newElement = document.createElement('div')
newElement.innerHTML = 'dynamicElement';
newElement.addEventListener('click',
this.dynamicElementClick.bind(this));
this.$.modal.appendChild(newElement);
},
dynamicElementClick: function(){
console.log('1111')
}
});
</script></polymer-element>
Now, whether or not you actually need the dynamic element is another
question altogether.
Wrt `injectBoundHTML`, this is potentially dangerous API as it opens you up
to XSS attacks if it's not used properly (as does `innerHTML` for that
matter). I would only use `injectBoundHTML` if I really needed to data-bind
some dynamic HTML (as opposed to listening to events, which is easily done
as above). For the record, it's a flaw in Polymer today that there isn't a
way to data-bind imperatively (via some kind of method) instead of having
to go through a `<template>`
Scott
On Wed, Oct 29, 2014 at 5:21 AM, santiago esteva <[email protected]>
wrote:
> From the Polymer docs
>
>
> https://www.polymer-project.org/docs/polymer/polymer.html#imperativeregister
>
> Registering imperatively Elements can be registered in pure JavaScript
> like this:
>
> <script>
> Polymer('name-tag', {nameColor: 'red'});
> var el = document.createElement('div');
> el.innerHTML = '\
> <polymer-element name="name-tag" attributes="name">\
> <template>\
> Hello <span style="color:{{nameColor}}">{{name}}</span>\
> </template>\
> </polymer-element>';
> // The custom elements polyfill can't see the <polymer-element>
> // unless you put it in the DOM.
> document.body.appendChild(el);
> </script>
> You need to add the to the document so that the Custom Elements polyfill
> picks it up.
>
> Important: Since the Polymer call here is outside the , it must include
> the tag name argument.
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/e7e9b248-f42a-4320-acbd-882ef90d6a4d%40googlegroups.com
> .
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAHbmOLYpTvvd5WY6gpmHy%3Dn2n-qchtT4Y9iXDdp1C90jb-j2kA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
