Làm cách nào để bạn tạo kiểu cho thẻ của phần tử tùy chỉnh từ bên trong phần tử?

Tôi đang cố gắng tạo kiểu cho thẻ phần tử tùy chỉnh và dường như không thể làm điều đó từ bên trong thẻ <style> của phần tử hoặc ít nhất tôi không biết chọn bộ chọn nào. Tôi đã thử tên thẻ của phần tử tùy chỉnh và template nhưng không hoạt động.Làm cách nào để bạn tạo kiểu cho thẻ của phần tử tùy chỉnh từ bên trong phần tử?

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

Tôi đang sử dụng polymer.dart, vì vậy có thể có sự chậm trễ trong việc triển khai, nhưng tôi muốn biết nó hoạt động như thế nào trong polymer.js.

Nguồn

2013-08-24 Justin Fagnani

Những ngày này bạn không còn cần một thuộc tính constructor cho polymer.dart. Ít nhất, tôi không cần nó. –

Tôi nghĩ điều bạn muốn là bộ chọn css @host. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host

Nguồn

2013-08-24 21:43:40 oskbor

Như đã đề cập trong câu trả lời khác, để tạo kiểu cho máy chủ của DOM bóng, hãy sử dụng bộ chọn @host. Trong trường hợp của một phần tử tùy chỉnh, máy chủ của phần tử tùy chỉnh là chính nó.

Dưới đây là ví dụ về cách tạo kiểu cho phần tử máy chủ hoặc chính phần tử tùy chỉnh, từ trong thẻ <style> của phần tử tùy chỉnh.

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

Thông báo các @host khối theo phong cách:

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

Bởi vì yếu tố tùy chỉnh đặc biệt này không mở rộng bất kỳ yếu tố, nó không mặc định đến một khối.

Đây là những gì nó trông giống như khi theo kiểu:

enter image description here

Nguồn

2013-08-25 13:02:28

@host {: scope {...}} hơi linh hoạt hơn so với sử dụng tên thẻ cho công cụ chọn. Nó cũng sẽ làm cho quá trình chuyển đổi thành: lưu trữ tự nhiên hơn. http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles – ebidel

@ đầu tốt đẹp! Vui lòng chỉnh sửa câu trả lời của tôi bất kỳ lúc nào :) –

Làm cách nào để bạn tạo kiểu cho thẻ của phần tử tùy chỉnh từ bên trong phần tử?

Trả lời

Các vấn đề liên quan