问题
I have created a custom Polymer element which extends paper-fab.
The element contains other elements such as paper-button and paper-input within it. These elements are initially hidden meaning, you just see a FAB.
With the custom element implemented on a different page, when it is clicked it gains focus therefore the custom element changes shape from a circle to a rectangle and shows the paper-button and paper-input elements within it.
When you click away from the custom element such as on a different part of the page, the element changes back to a circle from a rectangle as it no longer has focus. However when interacting with the paper-buttons and paper-input, these elements gain focus and therefore the custom element loses focus and changes shape back to a circle which is not intended here. When interacting with the elements contained within the custom element, the custom element should remain a rectangle; showing and allow interaction with the elements contained within it. When clicking away from the entire custom element, it should change back to a circle and hide the elements within it.
Please see the JS Bin to see how I currently have this set up: http://jsbin.com/wuxuhowavi/1/edit?html,output
来源：https://stackoverflow.com/questions/27028978/how-to-keep-focus-on-custom-polymer-element-when-interacting-with-focusable-elem