ポリマー2の鉄フレックスレイアウトが機能しない

ここで壁に頭を向けている。私のカスタムコンポーネントを作成することができるBarebones Polymer 2.0プロジェクトでは、iron-flex-layoutまたはiron-flex-layout-classesを動作させることはできません。ポリマーのCLIをインストールし、バワーを使用してポリマーを取り付けました。ポリマー2の鉄フレックスレイアウトが機能しない

ディレクトリ構造：index.htmlをインサイド

/bower_components 
    polymer, webcomponentsjs, iron-flex-layout, shadycss 

index.html

：

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 

    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script> 
    <link rel="import" href="/bower_components/polymer/polymer.html"/> 

    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> 
    <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout-classes.html"> 

    <style is="custom-style" include="iron-flex iron-flex-alignment"></style> 

    <style is="custom-style"> 

     .mixed-in-vertical-layout { 
      @apply(--layout-vertical); 
     } 

    </style> 

</head> 

<body> 

    <div class="horizontal layout"> 
     <div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div> 
    </div> 

    <div class="mixed-in-vertical-layout"> 
     <div>Vertical</div> <div>A</div> <div>B</div> <div>C</div> 
    </div> 

</body> 
</html>

私はpolymer buildを実行して、私のサーバーにbuild/defaultディレクトリをアップロードします。ページをリフレッシュすると、によって提供される.horizontal.layoutスタイルを使用する「水平A B C」、ページのスタイルheadエレメント内の「適用」ルールを使用する「垂直A B C」が期待されます。

これらのことは起こっていません。私はguideをTに従ったと信じていて、うまくいきません。ここで私は最初の要素を検査するとき、私はインスペクタで見るものです：

そして、ここでは、第二のだ：

あなたがインスペクタのCSSエリアで、見ることができるように、 " html "から継承されたチャンクはすべてのミックスインを表示しています。私はそれがそこに現れてはならないと確信しています。そして、ここでクローズアップします：CSSのVARの定義に含まれてい@apply

行を交差しています。私は全く混乱している。どういうわけか私のポリマーのインストールはうんざりしていますか？しかし、エラーは発生せず、カスタム要素が動作するように見えます（鉄フレックスのもの、クラスまたは@applyを除く）。

紙のコンポーネントを使用しようとしましたが、これも機能しますが、スタイルが違うように見えます。

手がかりはありますか？

ありがとうございます。

出典

2017-10-04 Kirill E.

感謝。ページ内のスタイルをラップすると修正されました。他の誰かが同じ問題を抱えている場合は、あなたのiron-flex-layoutコンポーネントが2.0.0+であることを確認することをおすすめします。私は元々は私の100％私ではない。ポリマーチームは実際にドキュメントとサンプルを更新する必要があります。例ではラッパーは表示されません。彼らは物事を新しいバージョンのIMOごとにもっと複雑にし続けます。 –

：thisコードを試してみてください。その答えは、下記の人々へ

<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 

 
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script> 
 
    <link rel="import" href="https://polygit.org/components/polymer/polymer.html" /> 
 

 
    <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout.html"> 
 
    <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout-classes.html"> 
 

 
    <custom-style> 
 
    <style include="iron-flex iron-flex-alignment"></style> 
 
    </custom-style> 
 
    
 
    <custom-style> 
 
    <style> 
 
     .mixed-in-vertical-layout { 
 
     @apply --layout-vertical; 
 
     } 
 
    </style> 
 
    </custom-style> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="horizontal layout"> 
 
    <div>Horizontal</div> 
 
    <div>A</div> 
 
    <div>B</div> 
 
    <div>C</div> 
 
    </div> 
 

 
    <div class="mixed-in-vertical-layout"> 
 
    <div>Vertical</div> 
 
    <div>A</div> 
 
    <div>B</div> 
 
    <div>C</div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-10-05 01:19:06 Ofisora

iron-flex-layout-classes.htmlでスタイルを取得できないと思うのは、それらが影のDOMによってマスクされているからです。 CSS変数を使用して取得する必要があります。また、<style>を<custom-style>にラップする必要があります。あなただけ<custom-element>であなたの<style>要素をラップする必要が

<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script> 
    <link rel="import" href="/bower_components/polymer/polymer.html"/> 
    <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html"> 

    <custom-style> 
     <style is="custom-style"> 
     .mixed-in-vertical-layout { 
      @apply --layout-vertical; 
     } 
     .horizontal-layout { 
      @apply --layout-horizontal; 
     } 
     </style> 
    </custom-style> 

    </head> 
    <body> 

    <div class="horizontal-layout"> 
     <div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div> 
    </div> 

    <div class="mixed-in-vertical-layout"> 
     <div>Vertical</div> <div>A</div> <div>B</div> <div>C</div> 
    </div> 

    </body> 
</html>

出典

2017-10-04 20:48:44 Thad

Codepenでは：https：// codepen。io/johnthad/pen/yzPZzZ – Thad

ポリマー2の鉄フレックスレイアウトが機能しない

答えて

関連する問題