re-sizing shadow DOM elements based on width/height style of the custom element

Question

I am trying to write a JavaScript for my custom element such that when a width/height style is applied to the custom element, the shadow DOM elements of the custom element will resize appropriately to fit within the border of the custom element.

I know that jQuery provides $(element).height() to get and also set the height property. I am able to use this.$ and allow JQuery to select the shadow DOMs. But how do I select the custom element itself from inside the polymer-element script section?

Thanks

zen zen · Accepted Answer · 2015-01-06T06:53:50

After looking through how the polymer team build their paper-button and how they are able to automatically re-size the background animation with the length of the button. I found that CSS is able to inherit style properties from its parents by using the keyword inherit.

In my case

<style>
  img{ width: inherit;}
</style>

Allow me to properly define the size of my custom button normally via css

custom-button{
   width: 10px;
}

instead of resorting to using the ::shadow pseudo-element

Looks like I really need to brush up on my CSS.

re-sizing shadow DOM elements based on width/height style of the custom element

1 Answers