10

カスタム要素タグのスタイルを設定しようとしていますが、要素の<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でどう動くのか知りたいです。

4

2 に答える 2

9

@hostあなたが望むのはcssセレクター だと思います。http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host

于 2013-08-24T21:43:40.537 に答える
8

別の回答で述べたように、シャドウ 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;
              }
            }

この特定のカスタム要素はどの要素も拡張しないため、デフォルトでブロックになりません。

スタイリングするとこんな感じ。

ここに画像の説明を入力

于 2013-08-25T13:02:28.193 に答える