Polymer 2 Eisen-Flex-Layout kann nicht funktionieren

Hier meinen Kopf gegen die Wand hämmern. Barebones Polymer 2.0 Projekt, in der Lage, meine benutzerdefinierten Komponenten zu erstellen, kann ich nicht iron-flex-layout oder iron-flex-layout-classes zu arbeiten. Installierte Polymer-CLI und installiertes Polymer mit Bower.Polymer 2 Eisen-Flex-Layout kann nicht funktionieren

Verzeichnisstruktur:

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

index.html

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

Ich betreibe polymer build, und laden Sie das build/default Verzeichnis auf meinem Server. Aktualisieren der Seite, erwarte ich "Horizontale A B C" zu verwenden .horizontal.layout Stil von iron-flex-layout-classes.html zur Verfügung gestellt, und "Vertical A B C", um @ apply Regel aus Stil innerhalb head Element der Seite zu verwenden.

Keines dieser Dinge passiert. Ich glaube, ich folgte dem guide zum T und es funktioniert nicht. Hier ist, was ich in dem Inspektoren zu sehen, als ich das erste Element inspizieren:

Und hier zweit:

Wie Sie sehen können, in dem CSS-Bereich des Inspektors " Von HTML geerbt "Chunk zeigt alle Mix-Ins an. Ich bin mir ziemlich sicher, dass es dort nicht so auftauchen sollte. Und hier ist die Nähe von:

Zeilen, die @apply in CSS var-Definitionen enthalten sind durchgestrichen. Ich bin total verwirrt. Ist meine Installation von Polymer irgendwie durcheinander? Ich bekomme jedoch keine Fehler, und meine benutzerdefinierten Elemente scheinen zu funktionieren (außer für das Eisen-Flex-Zeug, Klassen oder @ apply).

Ich habe versucht, mit Papierkomponenten, die auch funktionieren, aber un-styled.

Irgendwelche Hinweise?

Vielen Dank im Voraus.

Quelle

2017-10-04 Kirill E.

Dank Leute für die Antwort unten. Das Wrappen der Stile auf der Seite hat das Problem behoben. Wenn jemand anderes das gleiche Problem hat, würde ich auch empfehlen, sicherzustellen, dass Ihre Eisen-Flex-Layout-Komponente 2.0.0+ ist. Ich bin nicht 100% meiner ursprünglich. Polymer-Team muss wirklich ihre Dokumente und Beispiele aktualisieren, nirgendwo in ihren Beispielen sehe ich -Wrapper. Sie machen die Dinge bei jeder neuen Version IMO immer komplizierter. –

Sie müssen nur mit <custom-element> Ihr <style> Element wickeln.

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

Quelle

2017-10-05 01:19:06 Ofisora

Ich denke, Sie können nicht zu den Stilen in iron-flex-layout-classes.html gelangen, weil sie vom Shadow DOM maskiert werden. Sie sollten die CSS-Variablen verwenden, um zu ihnen zu gelangen. Außerdem müssen Sie Ihre <style> in <custom-style> wickeln. Versuchen this Code:

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

Quelle

2017-10-04 20:48:44 Thad

Und in Codepen: https: // Codepen.io/johnthad/pen/yzPZzZ – Thad

Polymer 2 Eisen-Flex-Layout kann nicht funktionieren

Antwort

Verwandte Themen