Question

我试图找出如何在父元素中定义动态类，然后在客户端元素的属性上设置类的名称，然后让客户端元素使用样式。

那么我有什么选择？

干杯

我想要打造成形的例子就在这里：

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
    <link rel='import' href='bower_components/polymer/polymer.html'>
</head>
<body unresolved>
    <dom-module id='my-element'>
        <style>
            /* Here is where I would like to dynamically add this 
                .somerandomname {
                    @apply(--the-class);
                }
                where 'somerandomname' is just some name tying to together with the div below
            */
            .somerandomname {
                @apply(--the-class);
            }
        </style>
        <template>
            <!--
                Below the class will actually be class$ allowing data binding to the somerandomname

                A note here is that there will be many tags that needs mixins and I do not know in advance
                what they are called, but the data provided to the custom element includes the class that should 
                be used for the tag
            -->
            <div class='somerandomname'>Show me the color</div>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: 'my-element',

            properties: {
                myclass: {
                    type: String,
                    value: ''
                }
            }
        });
    </script>

    <dom-module id='base-page'>
        <style>
            my-element {
                --the-class: {
                    background-color: red;
                };
            }
        </style>
        <template>
            <my-element myclass='--the-class'></my-element>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: 'base-page'
        });
    </script>
    <base-page></base-page>
</body>

Answer 1

看起来你对mixins和自定义css属性有点混淆，我希望这对此有所帮助。

首先，你真的不需要任何Polymer属性来使这个东西工作，所以，myclass的定义中的my-element属性并不是真正需要的。

考虑到这一点，你自然也不需要myclass="--the-class"位，没有这两件事，一切都应该正常。

然后再次记住，既然你以base-page的风格定义了所有my-element个孩子都会将mixin应用于它们

以下是您的代码的略微修改版本，应该说明如何应用mixins（这里是一个有效的fiddle）

<dom-module id="my-element">
  <template>
    <style>
      .customized {
        @apply(--customized-div);
      }
    </style>
    <div class="customized">
      This div is customized
    </div>
    <div>
      This div isn't customized
    </div>
  </template>
</dom-module>

<dom-module id="base-page">
  <template>
    <style>
      my-element { /*This applies to all my-element children*/
        --customized-div: {
          color: red;
        };
      }
      my-element.green { /*This only applies to those with the green class*/
        --customized-div: {
          color: green;
        };
      }
    </style>
    Child 1
    <my-element></my-element>
    <br>
    Child 2
    <my-element class="green"></my-element>
  </template>
</dom-module>

<script>
  Polymer({
      is: 'my-element'
  });

  Polymer({
      is: 'base-page'
  });
</script>
<base-page></base-page>

在Polymer中如何在父元素中定义类并在子元素中使用它？

1 个答案: