樣式：使用Javascript進行Polymer Element的主機

Question

我想用Javascript（動態）設置自定義Polymer元素的:host{} 。 我要設置樣式的屬性是“行高”，它將根據用戶的屏幕大小而變化（文本將始終在一行上）。

為了找到一種悶熱，我使用了兩種不同的方法：
第一個是正常的jquery：

   <dom-module is="custom-element">
        <template>
            <style>
                :host {
                    position: relative;
                    display: inline-block;
                    min-width: 5.15em;
                    min-height: 2em;
                    padding: 0.5em;
                    background: transparent;
                    font-size: 1.3em;
                    outline: none;
                    cursor: pointer;
                    color: #ABCFCA;
                    text-transform: uppercase;
                    text-align: center;
                    overflow: hidden;
                }
            </style>
            <content></content>
        </template>
        <script>
            Polymer({
                is: "custom-element",
                properties: {

                },
                ready: function() {
                    $(this).css("line-height", $(this).height() + "px");
                }
            });
        </script>

我嘗試的第二種方法是使用Polymer的自定義css屬性：

   <dom-module is="custom-element">
        <template>
            <style>
                :host {
                    position: relative;
                    display: inline-block;
                    min-width: 5.15em;
                    min-height: 2em;
                    padding: 0.5em;
                    background: transparent;
                    font-size: 1.3em;
                    outline: none;
                    cursor: pointer;
                    color: #ABCFCA;
                    text-transform: uppercase;
                    text-align: center;
                    overflow: hidden;
                    line-height: --dynamic-line-height;
                }
            </style>
            <content></content>
        </template>
        <script>
            Polymer({
                is: "custom-element",
                properties: {

                },
                ready: function() {
                    this.customStyle['--dynamic-line-height'] = $(this).height();
                    this.updateStyles();
                }
            });
        </script>

在使用Chrome的Element Inspector檢查元素時的第一種方法（普通jquery）中，甚至沒有添加/設置line-height屬性，並且文本保持在默認的垂直位置

第二種方法最終與第一種方法相同（元素樣式沒有變化/結果）

應該注意console.log($(this).height()); 產生32px的預期結果（在我的屏幕上）

如果有人可以幫助我修復/編輯我現有的任何方法，或者為我提供他們已經使用/記錄在某處的方法，那將是非常棒的。

謝謝。

Answer 1

第二個示例中的CSS僅使用CSS變量，但未聲明一個。 首先聲明一個像：

        <style>
            :host {
                --dynamic-line-height: 1px;
                ....
                line-height: var(--dynamic-line-height);
            }
        </style>

         ...

           ready: function() {
                var height = Polymer.dom(this).node.offsetHeight + 'px';
                this.customStyle['--dynamic-line-height'] = height;
                this.updateStyles();
            }

Plunker的例子

另請參閱在Polymer中通過JS更改CSS變量