将自定义 CSS 传递给 Polymer 元素

Question

我希望能够将 CSS width传递给我的自定义元素的影子 DOM。

自定义元素称为 my-list ，定义如下：

<dom-module id="my-list">
    <style>
        #container {
            width: var(width, 100%);
        }
    </style>
    <template>
        <div id="container">
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            is: 'my-list'
        });
    </script>
</dom-module>

它是这样用的：

<style type="text/css">
    .medium {
        width: 500px;
    }
</style>
<my-list class="medium">
    <list-entry>1</list-entry>
    <list-entry>2</list-entry>
</my-list>

但是，不应用500px宽度;宽度仍为 100%。

我做错了什么？

Answer 1

CSS 变量名称需要以 -- 开头

<dom-module id="my-list">
  <template>
    <style>
      #container {
        width: var(--my-list-width, 100%);
      }
    </style>
    <div id="container">
      <content></content>
    </div>
  </template>
  <script>
    Polymer({
      is: 'my-list'
    });
  </script>
</dom-module>

提示：<style>标签应该在<template>标签内（这在文档中有一段时间的解释不同，但后来发生了变化）。

---

如果使用聚合物功能，则需要为聚合物添加is="custom-style"，以了解它需要处理（填充）此样式标记内的样式。

<style is="custom-style" type="text/css">
  /* .medium { I think this should work but I fear it doesn't - haven't investigated yet*/
  :root { /*this works */
    --my-list-width: 500px;
  }
</style>
<my-list class="medium">
  <list-entry>1</list-entry>
  <list-entry>2</list-entry>
</my-list>