我希望能够通过CSSwidth
到我的自定义元素 Shadow DOM。
自定义元素称为my-list
,定义如下:
<dom-module id="my-list">
<style>
#container {
width: var(width, 100%);
}
</style>
<template>
<div id="container">
<content></content>
</div>
</template>
<script>
Polymer({
is: 'my-list'
});
</script>
</dom-module>
它的使用方式如下:
<style type="text/css">
.medium {
width: 500px;
}
</style>
<my-list class="medium">
<list-entry>1</list-entry>
<list-entry>2</list-entry>
</my-list>
但是,那500px
不应用宽度;宽度仍然是100%。
我究竟做错了什么?
CSS 变量名需要以--
<dom-module id="my-list">
<template>
<style>
#container {
width: var(--my-list-width, 100%);
}
</style>
<div id="container">
<content></content>
</div>
</template>
<script>
Polymer({
is: 'my-list'
});
</script>
</dom-module>
提示:将<style>
标签应该在<template>
标签(这在文档中的解释有所不同,但后来发生了变化)。
如果您使用 Polymer 功能,您需要添加is="custom-style"
让 Polymer 知道它需要处理(polyfill)此样式标签内的样式。
<style is="custom-style" type="text/css">
/* .medium { I think this should work but I fear it doesn't - haven't investigated yet*/
:root { /*this works */
--my-list-width: 500px;
}
</style>
<my-list class="medium">
<list-entry>1</list-entry>
<list-entry>2</list-entry>
</my-list>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)