SKM*_*MTH 2 css shadow-dom polymer
我有关于的内容paper-tab.有没有办法设计它们以便在每个标签中获得两行内容？回到过去,我会创建两个div, then used:: shadow .tab-content to apply aflex-direction:column``但现在::shadow已弃用...我已尝试将其替换为chromestatus平台上建议的完整选择器:
paper-tabs.tabs paper-tab #shadow-root div.tab-content
{
flex-direction: column;
}
但它也不起作用.
我尝试过使用mixin style is="custom-style"
.tabs{
--paper-tab-content: {flex-direction: column;};
}
也不起作用
有任何想法吗？
Polymer允许通过css mixins进行元素定制
参考纸张标签的文档,我们可以看到纸张标签有一个叫做css mixin --paper-tabs.事实上,大多数聚合物元素都有一个以custom元素命名的mixin,这是推荐的方法.查看源代码,我们可以看到mixin应用于css :host标记.如果要在范围内将mixin应用于所有元素,请使用:roottag.否则替换:root为任何类标记,例如my-class并将其应用于元素.
<html>
<head>
<base href="http://polygit.org/polymer+:master/components/">
<script src="components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-tabs/paper-tabs.html" rel="import">
<style is="custom-style">
:root {
/* Set custom property (variables) */
--paper-tabs-selection-bar-color: red;
/* Set mixin */
--paper-tabs: {
height: 200px;
background: teal;
color: rebeccapurple;
};
}
/* Apply mixin via class */
.my-class {
--paper-tabs-selection-bar: {
height: 20px;
}
}
</style>
</head>
<body>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<paper-tabs class="my-class" selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
</body>
</html>