在Web组件阴影DOM样式中,使用开槽图像src作为背景图像url

时间:2019-07-19 16:07:42

标签: web-component custom-element

我是Web组件的新手,并且正在尝试使用<slot>标签。我希望能够在模板的作用域样式中使用模板中的带槽图像标签作为背景图像url。由于插槽只是元素,因此似乎不太可能,但是我想知道是否有办法以某种方式在自定义元素的类中获取插槽的内容?有人知道这是否可能吗?

例如,如果我具有以下自定义元素标签:

<movie-info>
   <img slot='promo-img' src='example1.jpg'/>
</movie-info>

<movie-info>
   <img slot='promo-img' src='example2.jpg'/>
</movie-info>

我的模板包含:

<div class='container'>
   <slot name='promo-img'></slot>
</div>

无论如何,都可以使用该模板的作用域样式执行以下操作:

<style>
.container{background-image:url([slotted image src]);
</style>

0 个答案:

没有答案