Bảng định kiểu bên ngoài cho shadow dom trong các thành phần web

Question

Tôi đang tìm hiểu các thành phần web có gốc bóng và dường như không thể tìm thấy trên google nếu tải các bảng định kiểu bên ngoài có thể với mã out-of-the-box? Tôi KHÔNG sử dụng polymer hoặc bất kỳ thư viện thành phần web nào khác (chưa). Mã bên dưới:

<script src="../../libs/jquery-2.1.1.min.js"></script> 
<script> 
    var hollaProto = Object.create(HTMLElement.prototype); 
    hollaProto.createdCallback = function() { 
     var shadow = this.createShadowRoot(); 
     var content = document.querySelector('link[rel=import]').import.querySelector("div"); 

     $("button[data-command=holla]", content).on("click", function() { alert("Holla!"); }); 

     shadow.appendChild(content); 
    }; 
    var hollaWidget = document.registerElement("holla-back", { 
     prototype: hollaProto 
    }); 
</script> 
<div class="holla-back"> 
    <button data-command="holla">Holla!</button> 
</div> 

Nếu tôi đặt thẻ liên kết của mình lên trên, trên thẻ tập lệnh đầu tiên, tôi tạo kiểu toàn bộ web, nhưng không phải thành phần web.

Nếu tôi đặt nó dưới div.holla-back, nó không tạo kiểu gì cả.

Làm thế nào để bạn sử dụng biểu định kiểu bên ngoài với cấu phần web?

Answer 1

Thẻ liên kết là trơ trong Shadow DOM according to the spec. Tuy nhiên, bạn có thể sử dụng @import, mặc dù điều đó có vấn đề về hiệu suất riêng.

Cách Polymer hoạt động xung quanh việc này là xem các thẻ link và sử dụng xhr để tải các kiểu đó và áp dụng chúng.

chỉnh sửa:

The folks làm việc trên DOM bóng nhận thức được những thiếu sót này và rằng nó cần phải được cố định. Hy vọng rằng trong tương lai chúng ta có thể đưa ra một hệ thống hỗ trợ các bảng định kiểu bên ngoài.

Answer 2

Shadow DOM không phản ứng với thẻ liên kết. Infact, Chrome 41 ném một lỗi khi bạn sử dụng thẻ liên kết. Chúng tôi đã làm việc xung quanh giới hạn đó bằng cách nội tuyến các lớp CSS vào thời gian xây dựng bằng cách sử dụng lưu hóa. Điều này hóa ra khá tiện dụng trong việc tách CSS của bạn và định nghĩa thành phần.