聚合物自定义元素不服从父 html 元素

Question

我正在使用 Polymer 1.0 - 我的页面包含在 paper-scroll-header-panel 中，我正在尝试将主工具栏的一部分变成自定义元素 (my-header):

<paper-scroll-header-panel condenses keep-condensed-header>

    <!-- Main Toolbar -->
    <paper-toolbar class="tall layout horizontal" id="title-toolbar">
            <my-header id="myHeaderElement"></my-header>
    </paper-toolbar>

my-header 自定义元素如下所示：

<dom-module id="my-header">
<style>

</style>
<template>
    <div class="bottom center horizontal layout" id="testing">
        <paper-button>Title</paper-button>
        <div class="flex"></div>
        <paper-button on-click="openLang">lang</paper-button>
    </div>
</template>
<script>
    Polymer({
        is: "my-header",
        behaviors: [
            Polymer.IronFitBehavior,
            Polymer.IronResizableBehavior
        ],
        ready: function() {
            this.fit();
        }
    });
</script>
</dom-module>

问题在于布局属性 bottom center horizontal layout 未正确应用，因为它不服从父 <paper-toolbar> 元素。它呈现如下：

但它应该呈现橙色框底部的文本和左侧的 Title，中间的长弹性框，最右侧的 LANG。如果我将 HTML 从自定义元素中拉出并将其直接粘贴到 index.html 文件中，它就可以正常工作。

如您所见，我向元素添加了一些行为，并尝试在 ready 函数中调用它们，但无济于事..

我还尝试将整个 <paper-toolbar> 元素拉入自定义元素，但这只会给 <paper-scroll-header-panel> 的功能带来更多问题。

如何让此自定义元素保留在其父元素中并遵守格式 classes/attributes？

Answer 1

尝试在 dom 的元素上应用 class bottom。

<paper-toolbar class="tall layout horizontal" id="title-toolbar">
        <my-header class="bottom" id="myHeaderElement"></my-header>
</paper-toolbar>

聚合物自定义元素不服从父 html 元素

Polymer custom element not obeying parent html element

javascript

polymer

custom-element

polymer-1.0