聚合物元素不显示使用自定义 CSS 属性传递的背景图像

Question

我无法理解为什么我无法将背景图像的自定义 CSS 属性传递给聚合物元素。使用 CCS 属性为 Polymer 元素设置样式在此处进行了说明：https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details 这适用于某些元素（例如我下面代码中的灰色背景）。

<body>
    <dom-module id="my-element">
        <template>
            <style>
            :host {
                display: block;
                height: 300px;
                background-color: grey;
                color: var(--container-text, white);
                background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
                /* THIS WORKS
                background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
                */
            }
            </style>
            <div class='container'>Text color is correct, but no background image</div>
        </template>
        <script>
            Polymer({ is: 'my-element'});
        </script>
    </dom-module>
    <my-element></my-element>
</body>

我有两个问题：

为什么这不起作用？
解决这个问题的最佳方法是什么？

代码在这里：http://jsbin.com/yuxobexepe/edit?html,output

谢谢！

保罗

Answer 1

您正在混合 CSS 属性的 definition/usage。这是您的问题的有效 JSBIN：

<html>
<head>
  <base href="http://polygit.org/polymer/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
        height: 300px;
        background-color: grey;
        color: var(--container-text, blue);
        background-image: var(--container-background, "default.png");

        --container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
      }
    </style>
    <div class='container'>Text color is correct, but no background image</div>
  </template>
    <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({ is: 'my-element'});
    });
    </script>
  </dom-module>

  <my-element></my-element>

</body>
</html>

background-image 正在使用 --container-background 的值（如果存在），或者默认为您提供的值。然后您通常在组件本身之外单独定义 --container-background 属性。

聚合物元素不显示使用自定义 CSS 属性传递的背景图像

Polymer element doesn't display background-image passed with Custom CSS properties

css

polymer

polymer-1.0