将自定义CSS传递给Polymer元素 [英] Passing custom CSS to Polymer element

问题描述

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

I would like to be able to pass CSS width to my custom element's shadow DOM.

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

The custom element, called my-list, is defined as below:

<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％.

However, the 500px width is not applied; the width is still 100%.

我在做什么错了?

推荐答案

CSS变量名称必须以--

CSS variable names need to start with --

<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>标记之内(文档中对此有不同的解释，但稍后进行了更改).

Hint: the <style> tag should be within the <template> tag (this was explained differently a while back in the docs but changed later).

如果您使用Polymer功能，则需要为Polymer添加is="custom-style"才能知道它需要处理(polyfill)此样式标签中的样式.

If you use Polymer features you need to add is="custom-style" for Polymer to know it needs to process (polyfill) the styles inside this style tag.

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

这篇关于将自定义CSS传递给Polymer元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！