Html 将自定义CSS传递到聚合元素
我希望能够将CSSHtml 将自定义CSS传递到聚合元素,html,css,polymer,web-component,Html,Css,Polymer,Web Component,我希望能够将CSSwidth传递给我的自定义元素的阴影DOM 名为“我的列表”的自定义元素定义如下: <dom-module id="my-list"> <style> #container { width: var(width, 100%); } </style> <template> <div id="container">
width
传递给我的自定义元素的阴影DOM
名为“我的列表”的自定义元素定义如下:
<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>
#容器{
宽度:var(宽度,100%);
}
聚合物({
是:“我的名单”
});
它是这样使用的:
<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;
}
1.
2.
但是,不应用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 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>