Özel bir öğe etiketini öğenin içinden nasıl biçimlendirirsiniz?

Özel bir öğe etiketi oluşturmaya çalışıyorum ve öğenin <style> etiketinden yapamayacağı gibi, ya da en azından hangi seçicinin kullanılacağını bilmiyorum. Özel öğenin etiket adını ve template'u denedim, ancak ikisi de işe yaramadı.Özel bir öğe etiketini öğenin içinden nasıl biçimlendirirsiniz?

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

Ben polymer.dart kullanıyorum, bu yüzden onun uygulanmasında bazı gecikme olabilir, ama polymer.js nasıl çalışması gerektiğini bilmek istiyorum.

kaynak

2013-08-24 Justin Fagnani

Bu gün artık polymer.dart için bir yapıcı özelliği gerekir. En azından buna ihtiyacım yok. –

Bence istediğin şey @host css seçicisidir. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host

kaynak

2013-08-24 21:43:40 oskbor

Başka bir yanıtta belirtildiği gibi, DOM gölgesinin sunucusunu biçimlendirmek için @host seçiciyi kullanın. Özel bir öğe durumunda, özel öğenin sunucusu kendisidir.

Burada, ana öğenin veya özel öğenin kendisinin bir özel öğenin <style> etiketinin içinden nasıl biçimlendirileceğine dair bir örnek verilmiştir.

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

Bildirim tarzında @host blok: Bu özel özel öğe ve unsur kapsamaz Çünkü

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

, bir bloğa varsayılan değil. İşte

o tarz zaman neye benzediği:

enter image description here

kaynak

2013-08-25 13:02:28

@host {: scope {...}}, seçicinin etiket adını kullanmaktan biraz daha çok yönlüdür. Ayrıca geçişi daha da doğal hale getirecek. http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles – ebidel

@ebidel nice ipucu! Her zaman cevaplarımı düzenlemekte özgürüm :) –

Özel bir öğe etiketini öğenin içinden nasıl biçimlendirirsiniz?

cevap

İlgili konular