Question

我正在尝试设置自定义元素标记的样式，并且似乎无法在元素的<style>标记内执行此操作，或者至少我不知道要使用哪个选择器。我已经尝试过自定义元素的标记名称和template，但都没有工作。

<polymer-element name="my-test" constructor="MyTest">
  <template>
    <style>
      my-test {
        border: solid 1px #888; /* doesn't work */
      }
      .title {
        color: blue; /* works */
      }
    </style>
    <div class="title">{{ title }}</div>
  </template>

我正在使用polymer.dart，所以它的实现可能会有一些滞后，但我想知道它应该如何在polymer.js中工作。

Answer 1

我认为你想要的是@host css选择器。 http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host

Answer 2

如另一个答案所述，要为影子DOM的主机设置样式，请使用@host选择器。对于自定义元素，自定义元素的主机本身就是。

以下是如何在自定义元素的<style>标记内设置主机元素或自定义元素本身样式的示例。

<!DOCTYPE html>

<html>
<head>
    <title>index</title>
    <script src="packages/polymer/boot.js"></script>
</head>

<body>

    <polymer-element name="my-element">
        <template>
            <style>
                @host {
                  my-element {
                    display: block;
                    border: 1px solid black;
                  }
                }

                p {
                    color: red;
                }

                #message {
                    color: pink;
                }

                .important {
                    color: green;
                }
            </style>
            <p>Inside element, should be red</p>

            <div id="message">
                The message should be pink
            </div>

            <div class="important">
                Important is green
            </div>

            <div>
              <content></content>
            </div>
        </template>
        <script type="application/dart" src="index.dart"></script>
    </polymer-element>

    <p>outside of element, should be black</p>

    <div id="message">
        The outside message should be black
    </div>

    <div class="important">
        Outside important is black
    </div>

    <my-element>Hello from content</my-element>

    <!-- If the script is just an empty main, it's OK to include inline. -->
    <!-- Otherwise, put the app into a separate .dart file. -->

    <script type="application/dart">main() {}</script>
</body>
</html>

注意样式中的@host块：

            @host {
              my-element {
                display: block;
                border: 1px solid black;
              }
            }

由于此特定自定义元素不会扩展任何元素，因此它不会默认为块。

以下是样式时的样子：

enter image description here

如何在元素中设置自定义元素标记的样式？

2 个答案: