Come si modifica il tag di un elemento personalizzato all'interno dell'elemento?

Sto provando a creare un tag elemento personalizzato e non riesco a farlo dal tag <style> dell'elemento, o almeno non so quale selettore utilizzare. Ho provato il nome del tag dell'elemento personalizzato e template, ma nessuno dei due funziona.Come si modifica il tag di un elemento personalizzato all'interno dell'elemento?

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

sto usando polymer.dart, così ci possono essere un certo ritardo nella sua attuazione, ma mi piacerebbe sapere come dovrebbe funzionare in polymer.js.

fonte

2013-08-24 Justin Fagnani

In questi giorni non è più necessario un attributo costruttore per polymer.dart. Almeno, non ne avevo bisogno. –

Penso che quello che vuoi sia il selettore css @host. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host

fonte

2013-08-24 21:43:40 oskbor

Come menzionato in un'altra risposta, per definire l'host del DOM ombra, utilizzare il selettore @host. Nel caso di un elemento personalizzato, l'host dell'elemento personalizzato è esso stesso.

Ecco un esempio di come stile l'elemento host o l'elemento personalizzato stesso all'interno del tag <style> di un elemento personalizzato.

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

Avviso del @host blocco in stile:

  @host { 
       my-element { 
       display: block; 
       border: 1px solid black; 
       } 
      }

perché questo particolare elemento personalizzato non si estende alcun elemento, non fa di default ad un blocco.

Ecco come si presenta quando stile:

enter image description here

fonte

2013-08-25 13:02:28

@host {: scope {...}} è leggermente più versatile rispetto all'utilizzo del nome del tag per il selettore. Farà anche la transizione a: host più naturale. http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles – ebidel

@bidel bel consiglio! Sentiti libero di modificare le mie risposte in qualsiasi momento :) –

Come si modifica il tag di un elemento personalizzato all'interno dell'elemento?

risposta

Problemi correlati