Polymer 1.0 中的简单样式

Question

在对 0.5 做了一些工作后，我正试图掌握 Polymer 1.0。我正在努力解决应该是一个非常简单的样式问题。我似乎无法将样式应用于自定义元素。

这是我的元素定义，my-element.html:

<link rel="import" href="../core/polymer/polymer.html">

<dom-module id="my-element">
    <template><h1>Hello World</h1></template>
</dom-module>
<script>
Polymer({
    is: 'my-element',
});
</script>

这是使用它的主页，index.html:

<!doctype html>
<html>
<head>
    <script src="../core/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="my-element.html">
</head>
<body>
    <my-element></my-element>
</body>
</html>

这工作正常...但现在假设我想在 my-element 的实例上添加样式。我将此添加到 index.html:

    <style>
        my-element {
            margin-top: 50px;
        }
    </style>

没有任何反应，没有增加保证金。奇怪的是，Chrome 中的元素检查器似乎没有 "see" 自定义元素，看起来它漂浮在页面之外并且没有包含其中包含的元素。见截图：

我最初怀疑 Chrome 中存在错误，但在 Firefox 中也是同样的问题。

感谢任何帮助，非常感谢。

Answer 1

因为 my-element 不是默认的 DOM 元素，你应该 "enable" 它，就像那些 html5 shivs 为不理解新的旧浏览器做的那样html5 个元素

This tutorial should help you

var XFoo = document.registerElement('my-element');
document.body.appendChild(new XFoo());

document.registerElement() 的第一个参数是元素的标签名称。该名称必须包含破折号 (-)。因此，例如，、和都是有效名称，而和则不是。此限制允许解析器将自定义元素与常规元素区分开来，但也确保在将新标记添加到 HTML.

时向前兼容

第二个参数是描述元素原型的（可选）对象。这是向您的元素添加自定义功能（例如 public 属性和方法）的地方。

Answer 2

尝试将属性 is="custom-style" 放在样式标签上。

<style is="custom-style">
    ...
</style>

此外，默认情况下，元素将内联显示，但您可以通过在元素 :host 样式中应用显示属性来更改此设置。

<dom-module id="my-element">
  <style>
    :host {display: block;}
  </style>
  <template>
    ...
  </template>
</dom-module>

Polymer 1.0 中的简单样式

Simple styling in Polymer 1.0

css

polymer