Polymer 聚合物元件0px 0px_Polymer

Polymer 聚合物元件0px 0px

polymer

Polymer 聚合物元件0px 0px,polymer,Polymer,我浏览了[设置Bower and Polymer][1]视频，精确复制了代码，但得到了一个聚合物元素0px x 0px和x-foo 0px x 0px错误。怎么会？救命啊这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

我浏览了[设置Bower and Polymer][1]视频，精确复制了代码，但得到了一个聚合物元素0px x 0px和x-foo 0px x 0px错误。怎么会？救命啊

这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="x-foo" noscript>
  <template>
    <style>
      h1 {
        color: orange;
      }
    </style>
    <h1>Hello from x-foo</h1>
  </template>
</polymer-element>

<x-foo></x-foo>

</body>
</html>

所有聚合物元素的高度和宽度都设置为0，阴影根中的内容占据了空间。也就是说，polymer元素并不表示其阴影DOM中元素所占据的区域。

默认情况下，自定义元素为display:inline。要成为块级别，应使用display:block设置：host的样式；在你的阴影中：

:host {
  display: block;
}

谢谢你的回复。我试过了，但得到了同样的结果。是否有可能我安装了不正确的东西或没有安装我需要的东西？我使用的是Chrome版本41.0.2272.118，在本地服务器上运行。我复制了与视频中使用的@robdodson完全相同的代码，但没有“：host”代码。@ToughTimes什么结果最理想？是否希望x-foo表示h1占用的区域？元素是否已注册？e、 g.你忘了包含它的html导入吗？@ebidel，这很有可能。如何注册？我有那行代码吗？@FlyingEmu，那太理想了，是的。x-foo应该占据h1的高度，宽度应该和文本一样宽，或者和屏幕一样宽，这一点对我来说并不重要。感谢飞行的Emu-高度和宽度设置为自动。它设置为自动，但它不会从0改变它的宽度或高度，即使你在它的灯光DOM中添加元素。