Wie style innere Elemente von benutzerdefinierten Polymer-Element mit externen Stilen?

Es ist nicht möglich, ein Element mithilfe von Shadow DOM mit Polymer 1.x oder 2.x zu stylen. Betrachten Sie das folgende benutzerdefinierte Element in Polymer 2,0:Wie style innere Elemente von benutzerdefinierten Polymer-Element mit externen Stilen?

<link rel="import" href="../polymer/polymer.html"> 

<!-- 
`semantic-ui-button` 


@demo demo/index.html 
--> 

<dom-module id="polymer-button"> 
    <template> 
    <div class$="button {{size}}">{{label}}</div> 
    </template> 

    <script> 
    class MyElement extends Polymer.Element { 
     static get is() { 
     return 'polymer-button'; 
     } 
     static get properties() { 
     return { 
      label: { 
      type: String, 
      value: 'polymer-element' 
      }, 
      size: { type: String } 
     }; 
     } 
    } 

    window.customElements.define(MyElement.is, MyElement); 
    </script> 
</dom-module>

in der Demo:

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> 

    <title>polymer-element demo</title> 

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 
    <link rel="import" href="../polymer-element.html"> 

    <style is="custom-style" include="demo-pages-shared-styles"></style> 
    <style> 
     body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } 
     .button { 
     background: #ccc; 
     border-radius: 4px; 
     color: #444; 
     } 
     .button.big { 
     font-size: 1rem; 
     padding: 6px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="vertical-section-container centered"> 
     <h3>Basic polymer-element demo</h3> 
     <demo-snippet> 
     <template> 
      <polymer-button label="Demo"></polymer-button> 
     </template> 
     </demo-snippet> 
    </div> 
    </body> 
</html>

Die Stile in der Demo definierten für .button und .button.big sind nicht auf das Schattenelement angelegt; jedoch in Polymer 1.x die Stile angewendet werden wenn wir ShadyDOM verwenden:

<link rel="import" href="../polymer/polymer.html"> 

<!-- 
`polymer-button` 


@demo demo/index.html 
--> 

<dom-module id="polymer-button"> 
    <template> 
    <div class$="button {{size}}">{{label}}</div> 
    </template> 

    <script> 
    Polymer({ 

     is: 'polymer-button', 

     properties: { 
     label: { type: String } 
     }, 

    }); 
    </script> 
</dom-module>

gibt es eine Möglichkeit/Stil wählen diese inneren Elemente mit external styles?

Unten finden Sie eine visuelle Darstellung, was ich in der Reihenfolge des Erscheinens oben:

Polymer 1.x Schatten DOM
Polymer 1.x ShadyDOM
Polymer 2.x

Quelle

2017-03-13 djthoms

Um Styling Punkte zu ermöglichen, use CSS variables/mixins.

hinzufügen <style> Tag Vorlage Ihres Elements:

<dom-module id="polymer-button"> 
    <template> 
    <style> 
     .button { 
     @apply --my-button-mixin; 
     } 
     .button.big { 
     @apply --my-button-big-mixin; 
     } 
    </style> 
    ... 
    </template> 
</dom-module>

die mixin in einem Containerelement angeben:

<dom-module id="x-foo"> 
    <template> 
    <style> 
     polymer-button { 
     --my-button-mixin: { 
      background: red; 
      color: white; 
     }; 
     } 
    </style> 
    <polymer-button label="Red button"></polymer-button> 
    </template> 
</dom-module>

... oder in index.html:

<body> 
    <custom-style> 
    <style> 
     polymer-button { 
     --my-button-mixin: { 
      background: red; 
      color: white; 
     }; 
     } 
    </style> 
    </custom-style> 
    <polymer-button label="Red button"></polymer-button> 
</body>

codepen (Polymer 1)

codepen (Polymer 2)

Quelle

2017-03-13 08:07:24 tony19

Ich sah dies in der Dokumentation; Mit der mangelnden Unterstützung von IE/Edge halte ich dies jedoch nicht für eine praktikable Lösung. – djthoms

@djthoms Es wird tatsächlich auf IE/Edge mit den Web-Komponenten Polyfills unterstützt. [Screenshots] (http://imgur.com/a/UKtal) – tony19

Du hast Recht, es unterstützt es mit einem Polyfill. Ich kann meine Antwort abhängig von der Leistung dieses Polyfill ändern.Mein Hauptanliegen ist es, so nah wie möglich an nativen APIs zu bleiben - dieser Ansatz verwendet ShadyDOM. – djthoms

Alternativ können Sie auch ein <style> Element mit einer @import url Regel in Ihrem benutzerdefinierten Elemente <template> hinzufügen, die ein externes Stylesheet importiert:

<template> 
    <style> 
     @import url(external.css) 
    </style> 
    <div class$="button {{size}}">{{label}}</div> 
</template>

in Ihrem CSS-Stylesheet (Beispiel: external.css) Sie können Standard-CSS definieren:

.button { 
    background: #ccc; 
    border-radius: 4px; 
    color: #444; 
} 
.button.big { 
    font-size: 1rem; 
    padding: 6px; 
}

Quelle

2017-03-13 13:08:00 Supersharp

Ich mag diese Lösung, mit etwas Caching kann dies gut funktionieren. – djthoms

Wie style innere Elemente von benutzerdefinierten Polymer-Element mit externen Stilen?

Antwort

Verwandte Themen