[英]Passing custom CSS to Polymer element
我希望能夠將 CSS width
傳遞給我的自定義元素的 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 功能,則需要為 Polymer 添加is="custom-style"
以了解它需要處理(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.