Question

我完全通过[设置凉亭和聚合物] [1]视频复制代码，但获得了一个＆＃34;聚合物元素0px x 0px＆＃34;和＆＃34; x-foo 0px x 0px＆＃34;错误。怎么会？救命啊！

这是我的代码：

<!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>

Answer 1

默认情况下，自定义元素为display: inline。要成为块级别，您应该在阴影dom中为:host添加display: block;样式：

:host {
  display: block;
}

https://www.polymer-project.org/0.5/articles/styling-elements.html#element-defined-styles

Answer 2

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

聚合物元素0px x 0px

2 个答案: