具有属性的HTML5 Polymer自定义元素样式

r0ber7

我正在尝试Polymer和自定义元素。试图通过传递属性值来使元素内的<h1>具有某种颜色。所以我的元素代码看起来像这样:

<polymer-element name="test-element" attributes="nameColor">
  <template>
    Hello! My name is <span style="color:{{nameColor}}">Robert</span>
    <h1> oioioi </h1>

  <style>
  h1 {
    color:{{nameColor}};
  }
  </style>

  </template>
  <script>

    Polymer('test-element', {
      nameColor: "blue"
    });

  </script>
</polymer-element>

所以,然后我使用像这样的元素:

<test-element nameColor="red"></test-element>

问题是,我的名字(罗伯特)现在是红色。哪个好 但是h1元素不是红色。为什么不?如果我更改颜色:{{nameColor}}; 在样式标签内将其颜色变为:red; 它有效,但我显然不希望如此。那么属性值不会传递给样式吗?关于为什么会发生这种情况以及我应该在哪里寻找更多信息的任何提示?我已经阅读了一些博客,但是没有找到任何具体的信息。

谢谢。:-)

斯科特·迈尔斯(Scott Miles)

虽然可以绑定到style属性,但是由于CSS填充在非本机ShadowDOM上的工作方式因此无法绑定到<style>标签。

它仍处于实验阶段,请看一下core-style

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS如何摆脱使用自定义HTML5元素标签和属性的困扰?

来自分类Dev

自定义数据中的有效字符-HTML5中的属性名称

来自分类Dev

与AngularJS相比,在Polymer中使用创建自定义HTML5元素/小部件的利弊是什么?

来自分类Dev

带有HTML导入的Polymer自定义元素样式

来自分类Dev

如何抓取自定义html5属性

来自分类Dev

具有属性的HTML5 Polymer自定义元素样式

来自分类Dev

样式不适用于HTML5自定义元素

来自分类Dev

DART POLYMER:如何通过另一个自定义元素更新属性?

来自分类Dev

使用Omnifaces传递自定义HTML5属性

来自分类Dev

jQuery选择具有自定义属性的元素

来自分类Dev

自定义拖放HTML5

来自分类Dev

自定义HTML元素的属性

来自分类Dev

样式自定义HTML元素

来自分类Dev

Aurelia:自定义元素与自定义属性

来自分类Dev

自定义HTML元素是否继承父CSS样式?

来自分类Dev

文本溢出属性自定义样式

来自分类Dev

具有自定义Tileset或样式的Mapbox NavigationView

来自分类Dev

具有自定义参数的样式触发器

来自分类Dev

选择自定义属性以设置样式

来自分类Dev

样式仅在具有布局属性的元素内应用于自定义聚合物元素的样式

来自分类Dev

自定义拖放HTML5

来自分类Dev

在自定义数据属性中定义的样式文本

来自分类Dev

如何在Polymer中的自定义元素属性中添加事件侦听器?

来自分类Dev

自定义HTML元素是否继承父CSS样式?

来自分类Dev

如何将轮廓仅应用于自定义样式的HTML选择元素的扩展clickable元素?

来自分类Dev

将属性作为函数传递给Polymer中的自定义元素

来自分类Dev

CSS 中的类/ID 和自定义 HTML5 属性有什么区别?

来自分类Dev

具有多个主题的自定义警报样式

来自分类Dev

带有字体样式的自定义按钮样式

Related 相关文章

  1. 1

    AngularJS如何摆脱使用自定义HTML5元素标签和属性的困扰?

  2. 2

    自定义数据中的有效字符-HTML5中的属性名称

  3. 3

    与AngularJS相比,在Polymer中使用创建自定义HTML5元素/小部件的利弊是什么?

  4. 4

    带有HTML导入的Polymer自定义元素样式

  5. 5

    如何抓取自定义html5属性

  6. 6

    具有属性的HTML5 Polymer自定义元素样式

  7. 7

    样式不适用于HTML5自定义元素

  8. 8

    DART POLYMER:如何通过另一个自定义元素更新属性?

  9. 9

    使用Omnifaces传递自定义HTML5属性

  10. 10

    jQuery选择具有自定义属性的元素

  11. 11

    自定义拖放HTML5

  12. 12

    自定义HTML元素的属性

  13. 13

    样式自定义HTML元素

  14. 14

    Aurelia:自定义元素与自定义属性

  15. 15

    自定义HTML元素是否继承父CSS样式?

  16. 16

    文本溢出属性自定义样式

  17. 17

    具有自定义Tileset或样式的Mapbox NavigationView

  18. 18

    具有自定义参数的样式触发器

  19. 19

    选择自定义属性以设置样式

  20. 20

    样式仅在具有布局属性的元素内应用于自定义聚合物元素的样式

  21. 21

    自定义拖放HTML5

  22. 22

    在自定义数据属性中定义的样式文本

  23. 23

    如何在Polymer中的自定义元素属性中添加事件侦听器?

  24. 24

    自定义HTML元素是否继承父CSS样式?

  25. 25

    如何将轮廓仅应用于自定义样式的HTML选择元素的扩展clickable元素?

  26. 26

    将属性作为函数传递给Polymer中的自定义元素

  27. 27

    CSS 中的类/ID 和自定义 HTML5 属性有什么区别?

  28. 28

    具有多个主题的自定义警报样式

  29. 29

    带有字体样式的自定义按钮样式

热门标签

归档