样式化纸标签内容答案

【问题标题】：Styling paper-tab content样式化纸标签内容
【发布时间】：2023-12-23 04:21:01
【问题描述】：

我有关于paper-tab 的内容。有没有办法设置它们的样式以便在每个选项卡中获得两行内容？回到过去，我会创建两个div, then used::shadow .tab-contentto 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;};
}

也不行

有什么想法吗？

【问题讨论】：

标签： css polymer shadow-dom

【解决方案1】：

Polymer 允许通过 css mixins 自定义元素

参考paper-tabs 的文档，我们可以看到paper-tabs 有一个名为--paper-tabs 的css mixin。事实上，大多数聚合物元素都有一个以自定义元素命名的 mixin，这是推荐的方式。查看source，我们可以看到在css :host 标签上应用了mixin。如果要将范围内的mixin 应用于所有元素，请使用:root 标签。否则将: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>

【讨论】：

感谢您的回答。但这并不能解决我的问题。我可以通过 mixin 更改选项卡背景或文本。但是对于我想要做的事情（在选项卡中有两行文本），我需要应用一个 flex-direction: 拒绝工作的列
好吧，算了。我做错的是将我的 mixin 设置在 root 之外的另一个选择器中。现在一切正常。谢谢！
@SKMTH 我应该更清楚 :root 不是必需的。我只是假设您想将 mixin 应用于每个元素。我在示例中展示了如何通过类或 id 应用 mixin。
好的，我试过了，确实可以了。奇怪，当我使用我在原始帖子中编写的 mixin 示例时，我不明白为什么它不起作用。但是，无论如何，谢谢，很高兴得到确认我做的（几乎）正确;）