Behaviors -- Polycasts #21
Why Stack Overflow recommends it
Stack Overflow users link it in Polymer 1.0 answers about extending elements, reusing code and adding behaviors, since custom elements could not be extended and behaviors were the supported alternative.
Recommended by 3 people across 3 different months, 2015 to 2016.
What it is
An 8-minute Polycasts episode from Google for Developers in which Rob Dodson explains Polymer 1.0 behaviors, a mixin-style way to add lifecycle callbacks, properties, observers and listeners to elements without inheritance. It includes a demo built around the iron-list element and links to the behaviors guide.
What people said
Strong rec Granze · 2015-07 · Stack Overflow · on “Is it possible to extend Polymer element and reuse its style?”
You can extend custom elements through Behaviors [LINK] like this: <dom-module id="my-better-button"> <script> Polymer({ is: 'my-better-button', behaviors: [betterButton] }); </script> </dom-module> Behaviors are like Mixins so they are, basically, a Javascript object. A behavior can define lifecycle callbacks, declared properties, default attributes, observers, and listeners. I suggest you to watch this great video on this topic that explain very well how to use it: [this video]
Strong rec jean Pokou · 2015-10 · Stack Overflow · on “Polymer Custom Animations”
There is an element for that! it is called neon-animation, you can find it in the Polymer's Catalog : neon-animations [LINK] neon animations provide pre-defined animations you can use in your web app, but first you need to understand the concept of web animation in the Polymer world. There is no better tutorial than these three videos on animations done by Rob Dodson: Behaviours [this video] Slick Web Animations [LINK] neon-Animated Pages [LINK] Its recommended, no its vital you watch them in order
Recommends Ben Thomas · 2015-07 · Stack Overflow · on “How to call the default behavior's method in Polymer 1.0?”
I don't think this is possible. The only solution I have is that you set up an observer that calls a "super" function that executes and then calls another function which is "abstract": <script> dataBehavior = { properties: { data: { type: Array, value: null, observer: 'superDataChanged' } }, superDataChanged: function(newValue, oldValue) { console.log('default stuff'); this.abstractDataChanged(newValue, oldValue); }, abstractDataChanged: function (newValue, oldValue) { // abstract } }; </script> Your element(s) can then implement this abstract method to do specific things: <dom-module id="my-module"> <template> </template> <script> Polymer({ is: "my-module", behaviors: [dataBehavior], abstra
Recommends Ben Thomas · 2015-11 · Stack Overflow · on “How to use behaivors in Polymer 1.0 to imitate extends in polymer 0.5”
Correct, you currently can't extend Polymer elements although you may be able to in a future release. A behavior is written as a HTML file with some JavaScript in that defines the behaviour. You can't put an element in this. You would need to write a behavior and then implement that in your elements that you want to have that behavior. Google did a great tutorial video on this which you can find here [this video] .
Recommends Ben Thomas · 2015-11 · Stack Overflow · on “How to use behaviors in Polymer v1.0 to extend a polymer element?”
Firstly, in Polymer 1.0 you can only extend native HTML elements and not custom elements (this may be enabled in the future). Secondly, there is a great video here [this video] on Polymer behaviors. if you look at the documentation [LINK] for the `paper-icon-button` element, you can see that it implements `Polymer.PaperInkyFocusBehavior` which is a behavior that you can implement in your `submenu-button`
Cites Casey Carroll · 2016-08 · Stack Overflow · on “Polymer Adding a behavior to a element”
According to the Polymer Project Documentation [LINK] , you'll need to define your own namespace in your behavior html file like so: window.MyBehaviors = window.MyBehaviors || {}; MyBehaviors.SomeBehavior = { ... } This adds a MyBehaviors namespace to the global window object, so the behavior can be referenced from your element as "myBehaviors.SomeBehavior". I believe Polymer requires this to avoid collisions with current and future Polymer behaviors. Also see Rob Dodson's video on Behaviors [this video] .