Sử dụng phần tử <paper-material> trong phần tử tùy chỉnh

Question

Tôi đang phát xung quanh với bộ công cụ Bắt đầu Polymer và đang tạo phần tử tùy chỉnh lồng nhau. Tôi có một phần tử bên ngoài 'xuất' phần tử bên trong nhiều lần.

Vấn đề của tôi là phần tử bên trong (danh thiếp) chứa <paper-material>. Yếu tố này không bị ảnh hưởng bởi phong cách toàn cầu. Tôi biết rằng Polymer thêm một lớp scoped-style vào phần tử đảm bảo nó chỉ có thể ảnh hưởng đến DOM cục bộ. Việc xóa lớp scoped-style trong Công cụ tìm kiếm sẽ áp dụng kiểu dáng toàn cầu.

Làm cách nào để áp dụng các kiểu từ tiêu chuẩn <paper-element> cho phần tử lồng nhau của tôi hoặc bao gồm các kiểu giống nhau trong phần tử tùy chỉnh của tôi.

Sửa

Có vẻ các vấn đề của tôi là phong cách trong 'app-chủ đề' không áp dụng cho các yếu tố nội bộ. Tôi có thể nhận được kết quả mong muốn nếu tôi sao chép các kiểu <paper-element>, bao gồm truy vấn phương tiện, cộng theo câu trả lời từ @Zikes.

Có vẻ như chống lại bản chất mô-đun của polymer sao chép mọi thứ từ một phần tử khi phần tử đã hoàn hảo. Tui bỏ lỡ điều gì vậy?

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

Bất kỳ giúp nhiều đánh giá cao

Answer 1

Polymer bảo vệ phần tử bên trong từ kiểu tài liệu và ngược lại. Đây là Phạm vi CSS và đây là tính năng nổi bật của Cấu phần web. Nó có thể có vẻ có vấn đề trong các ví dụ đơn giản, nhưng nói chung rất có lợi cho việc tái sử dụng thành phần mà các kiểu thành phần không bash lẫn nhau, và các kiểu tài liệu đó không vô tình tạo thành một thành phần.

Bộ khởi động polymer không được thiết lập lý tưởng để sử dụng app-theme.html trong phạm vi khác, nhưng một điều bạn có thể làm là sao chép quy tắc kiểu bạn muốn sử dụng vào tệp CSS rồi nhập tệp CSS đó vào mã phần tử của bạn phía dưới. Nhập và kiểu được sử dụng hiệu quả (ví dụ: quá trình nhập chỉ được tải một lần, ngay cả khi bạn sử dụng nó trong nhiều phần tử).

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

Sống dụ: http://jsbin.com/hojajo/edit?html,output

Answer 2

Nếu bạn muốn áp dụng các hiệu ứng cho paper-material yếu tố trực tiếp, bạn có thể làm như vậy như thế này:

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

Điều này được sao chép từ chính mã paper-material: https://github.com/PolymerElements/paper-material/blob/master/paper-material.html