Я использую 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>.
Как я могу заставить этот пользовательский элемент оставаться внутри своего родителя и подчиняться классам/атрибутам форматирования?
