2

我index.html的是这样的

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Keyboard</title>
        <!-- 1. Load webcomponent support before any code that touches the DOM -->
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

        <link rel="import" href="elements/each-key.html">
        <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
        <style>
            #keyboard-layout {
              @apply(--layout-horizontal);
            }
        </style>
      </head>
        <body>
            <div id="keyboard-layout">
                <each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
                <each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
                <each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
            </div>
        </body>
    </html>

我期待each-key会并排安排（如float:left）；然而它不是（并且each-key仍然表现得像display:block）。我有我each-key.html的

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">


<dom-module id="each-key">
    <style>
        .key{
            min-height: 50px;
            max-height: 80px;
            border: 1px solid rgba(0,0,0,.6);
            position: relative;
        }

            paper-ripple {
              color: #4285f4;
            }

        .key>div { position: absolute; }
        .top-left { left: 4px; top: 4px; }
        .top-right { right: 4px; top: 0; }
        .bottom-left { left: 4px; bottom: 4px; }
        .bottom-right { right: 4px; bottom: 0; }

    </style>
    <template>
        <div class="key" >
            <div class="top-left"></div>
            <div class="top-right">{{shiftdown}}</div>
            <div class="bottom-left">{{english}}</div>
            <div class="bottom-right">{{shiftup}}</div>

            <paper-ripple fit></paper-ripple>
        </div>
    </template>
</dom-module>

<script>
  Polymer({
    is: 'each-key',
    properties: {
        'english' : String,
        'shiftup': String,
        'shiftdown': String
    }
  });
</script>
  1. 我在这里缺少什么吗？
  2. 在文档中，https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes在该<style>部分中，它是什么意思/*layout properties for the host element */（什么是宿主元素？）和/* layout properties for a local DOM element */（什么是在这种情况下的本地 DOM？本地 DOM === 影子 DOM？）？
4

1 回答 1

2

CSS mixin 只能在dom-module's 内部工作，类也可以在外部工作 - 我不知道为什么，我也必须尝试一下......

这会起作用：

<body class="layout horizontal">

但更聚合的方法可能是将完整的东西包装在一个 dom 模块中：

<dom-module id="all-keys">
<style>
  #keyboard-layout {
    @apply(--layout);
    @apply(--layout-horizontal);
  }
</style>
<template>
  <div id="keyboard-layout" >
    <each-key english="A" shiftup="U" shiftdown="D"></each-key>
    <each-key english="A" shiftup="U" shiftdown="D"></each-key>
    <each-key english="A" shiftup="U" shiftdown="D"></each-key>
  </div>
</template>
<script>
  Polymer({is: 'all-keys'});
</script>
</dom-module>

如果您还添加了一个min-width，each-key那么这可以正常工作：

<dom-module id="each-key">
<style>
  :host {
    min-width: 50px;
  }

或者：

<dom-module id="each-key">
<style>
  :host {
    @apply(--layout-flex);
  }

这也回答了你的问题二：:host是确定dom-module实例的属性。

换句话说，你可以离开<div id="keyboard-layout" >：

<dom-module id="all-keys">
  <style>
  :host {
    @apply(--layout);
    @apply(--layout-horizontal);
    }
  </style>
  <template>
      <each-key english="A" shiftup="U" shiftdown="D"></each-key>
      <each-key english="A" shiftup="U" shiftdown="D"></each-key>
      <each-key english="A" shiftup="U" shiftdown="D"></each-key>
  </template>
  <script>
    Polymer({is: 'all-keys'});
  </script>
</dom-module>

完整的工作源在：http: //jsbin.com/qanesapupo/1/edit ?html,output

于 2015-08-10T05:58:58.563 回答