There's not a good way to know if/when an element becomes "visible". That goes for native elements like <div> too. It's a limitation of the browser and we desperately need an API for it. However, attached/detached should be called any time an instance of the element is added to the DOM or removed from the DOM. It doesn't have anything to say if the element is actually visible to the user.
What I've done in the past is checked `this.offsetParent !== null` to know if an element isn't part of layout (e.g. `display: none`). However, that doesn't work for cases like `visibility: hidden`. Another option is to apply a css class or boolean html attribute when the action is taken by the user...then show/hide icons accordingly from within your element's css. Lastly, IronResizableBehavior is used by some of the elements to know when things becoming "visible". https://elements.polymer-project.org/elements/iron-resizable-behavior?active=Polymer.IronResizableBehavior On Sat, Jun 27, 2015 at 9:33 AM <[email protected]> wrote: > I wanted to add buttons dynamically to the toolbar whenever my element is > shown > *** And remove those buttons when my element is hidden **** > , is this possible? > > > On Saturday, June 27, 2015 at 6:27:23 PM UTC+10, [email protected] > wrote: >> >> Hi: >> >> I'm new to polymer with background in sencha's ext js. >> >> I'm playing around with the polymer starter kit and >> >> I'm looking for event listeners that can be triggered when an element is >> shown and hidden, >> >> I managed to find created, attached, detached (i.e. below) but the >> created and attached is triggered once and that's it. >> >> I wanted to add buttons dynamically to the toolbar whenever my element is >> shown, is this possible? >> >> <script> >> (function(){ >> Polymer({ >> is: 'my-element', >> properties: { >> >> }, >> created: function() { >> console.log(this.localName + '#' + this.id + ' was >> created'); >> }, >> attached: function() { >> console.log(this.localName + '#' + this.id + ' was >> attached'); >> }, >> detached: function() { >> console.log(this.localName + '#' + this.id + ' was >> detached'); >> } >> }); >> })(); >> >> </script> >> >> Thanks >> Juan >> >> >> >> >> 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/15744b6c-ee29-4196-a66b-8e6ee713e235%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/15744b6c-ee29-4196-a66b-8e6ee713e235%40googlegroups.com?utm_medium=email&utm_source=footer> > . > 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/CACGqRCAWQfs5YtpigdxxyHAxNumcv%3Da%3DSK0kwSufLjzH9Db5Tw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
