Utilizzare l'elemento <materiale-carta> all'interno dell'elemento personalizzato

Question

Sto giocando con il kit Polymer Starter e sto creando un elemento personalizzato nidificato. Ho un elemento esterno che "emette" l'elemento interno più volte.

Il mio problema è che l'elemento interno (biglietto da visita) contiene un <paper-material>. Questo elemento non è influenzato dagli stili globali. So che Polymer aggiunge una classe di scoped-style all'elemento che garantisce che possa influenzare solo il DOM locale. La rimozione della classe scoped-style in Dev Tools applica lo stile globale.

Come applicare gli stili dallo standard <paper-element> al mio elemento nidificato o includere quegli stessi stili all'interno del mio elemento personalizzato.

Modifica

Sembra che il mio problema è che gli stili all'interno di 'app-tema' non vengono applicate all'elemento interno. Posso ottenere il risultato desiderato se copio gli stili <paper-element>, comprese le query multimediali, più segui la risposta di @Zikes.

Sembra contrario alla natura modulare del polimero duplicare tutto da un elemento quando l'elemento è già perfetto. Mi sto perdendo qualcosa?

business card.html

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/paper-material/paper-material.html"> 

<dom-module id="business-card"> 

    <style> 
    :host { 
     display: block; 
    } 
    </style> 

    <template> 
    <paper-material> 
     <content></content> 
    </paper-material> 
    </template> 

</dom-module> 

<script> 
(function() { 
    Polymer({ 
    is: 'business-card' 
    }); 
})(); 
</script> 

Qualsiasi aiuto molto apprezzato

Answer 1

Il polimero protegge gli interni dell'elemento dagli stili del documento e viceversa. Questo è Ambito CSS ed è una funzione di spicco di Web Components.

Può sembrare problematico in semplici esempi, ma in genere è molto utile per il riutilizzo dei componenti che gli stili dei componenti non si toccano l'un l'altro e che gli stili del documento non involontariamente sporcano un componente.

Il Polymer Starter Kit non è impostato in modo ideale per l'utilizzo di app-theme.html in altri ambiti, ma una cosa che si può fare è copiare le regole di stile che si desidera utilizzare in un file CSS e quindi importare quel file CSS nel codice dell'elemento come sotto. L'importazione e gli stili vengono utilizzati in modo efficiente (ad esempio, l'importazione viene caricata una sola volta, anche se la si utilizza in più elementi).

<dom-module id="business-card"> 

    <link rel="import" type="css" href="theme-styles.css"> 

    <style> 
    :host { 
     display: block; 
    } 
    </style> 

    <template> 
    <paper-material> 
     <content></content> 
    </paper-material> 
    </template> 

    <script> 
    Polymer({ 
     is: 'business-card' 
    }); 
    </script> 

</dom-module> 

vivo esempio: http://jsbin.com/hojajo/edit?html,output

Answer 2

Se vuoi applicare gli effetti alle paper-material vostro elemento direttamente, è possibile farlo in questo modo:

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="../paper-styles/shadow.html"> 

<dom-module id="business-card"> 
    <style> 
    :host { 
     display: block; 
     position: relative; 
     @apply(--shadow-transition); 
    } 
    :host([elevation="1"]) { 
     @apply(--shadow-elevation-2dp); 
    } 
    :host([elevation="2"]) { 
     @apply(--shadow-elevation-4dp); 
    } 
    :host([elevation="3"]) { 
     @apply(--shadow-elevation-6dp); 
    } 
    :host([elevation="4"]) { 
     @apply(--shadow-elevation-8dp); 
    } 
    :host([elevation="5"]) { 
     @apply(--shadow-elevation-16dp); 
    } 
    </style> 
    <template> 
    <content></content> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
    is: 'business-card', 
    properties: { 
     /** 
     * The z-depth of this element, from 0-5. Setting to 0 will remove the 
     * shadow, and each increasing number greater than 0 will be "deeper" 
     * than the last. 
     * 
     * @attribute elevation 
     * @type number 
     * @default 1 
     */ 
     elevation: { 
     type: Number, 
     reflectToAttribute: true, 
     value: 1 
     }, 
     /** 
     * Set this to true to animate the shadow when setting a new 
     * `elevation` value. 
     * 
     * @attribute animated 
     * @type boolean 
     * @default false 
     */ 
     animated: { 
     type: Boolean, 
     reflectToAttribute: true, 
     value: false 
     } 
    } 
    }); 
</script> 

Questo viene copiato dal codice paper-material stesso: https://github.com/PolymerElements/paper-material/blob/master/paper-material.html