无法证明coretoolbar中的元素

Question

我试图证明core-toolbar中的一些元素是合理的，但是我无法让它起作用。

这是我的代码：

 <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_card {
        position: absolute;
        width: 300px;
        height: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 440px;
        top: 90px;
        background-color: rgb(255, 255, 255);
      }
      #core_toolbar {
        right: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #div {
        display: block;
      }
      #core_icon_button {
        display: block;
      }
    </style>
    <core-card id="core_card" layout vertical>
      <core-toolbar id="core_toolbar" horizontal layout justified>
        <div id="div1">div 1</div>
        <div id="div2">div 2</div>
        <div id="div">Toolbar</div>
      </core-toolbar>
    </core-card>
  </template>

代码结果

预期结果

Answer 1

问题是，您放置在core-toolbar内的内容会被div的Shadow DOM内的core-toolbar内容。

<core-toolbar>
  #shadow-root
    ...
    <div id="topBar" class="toolbar-tools" center horizontal layout>
      <content></content>  <!-- your content is inside of here -->
    </div>

您的布局属性未应用于此子级div，因此您无法获得所期望的布局。

获得所需布局的最简单方法是告诉孩子div到flex

<core-toolbar>
  <div flex>Foo</div>
  <div flex>Bar</div>
  <div>Baz</div>
</core-toolbar>

Here's a jsbin example