根据自定义元素的 width/height 样式调整阴影 DOM 元素的大小

Question

我正在尝试为我的自定义元素编写 JavaScript，这样当 width/height 样式应用于自定义元素时，自定义元素的阴影 DOM 元素将适当调整大小以适应自定义元素的边框。

我知道 jQuery 提供 $(element).height() 来获取和设置高度属性。我可以使用 this.$ 并允许 JQuery 到 select 阴影 DOMs。但是如何从聚合物元素脚本部分 select 自定义元素本身？

谢谢

Answer 1

了解聚合物团队如何构建纸质按钮以及他们如何能够根据按钮的长度自动调整背景动画的大小。我发现 CSS 能够通过使用关键字 inherit.

从其父级继承样式属性

就我而言

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

允许我通过 css

正常定义自定义按钮的大小

custom-button{
   width: 10px;
}

而不是使用 ::shadow 伪元素

看来我真的需要温习一下 CSS。

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