Tôi đang xây dựng một tiện ích cho các trang web của bên thứ ba, sử dụng Shadow DOM để ngăn CSS của họ can thiệp vào trang web của chúng tôi. Tôi đang sử dụng các polyfill ShadyDOM và ShadyCSS để làm cho nó hoạt động trong Edge và IE, nhưng nó không chuyển đổi CSS cho DOM bóng tối như tôi mong đợi.
Thí dụ:
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM test</title>
</head>
<body>
<div id="container">container is here</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<script>
const shadow = document.getElementById("container").attachShadow({ mode: "open" });
const style = document.createElement("style");
style.innerHTML = `
:host .stuff {
background: #ff00ff;
}
`;
shadow.appendChild(style);
const div = document.createElement("div");
div.classList.add("stuff");
div.innerHTML = "stuff inside shadow dom";
shadow.appendChild(div);
</script>
</body>
</html>Trong Chrome (hỗ trợ bóng DOM nguyên bản), stuffdiv có nền màu hồng, như tôi mong đợi. Nhưng trong Edge (vốn không hỗ trợ bóng DOM nguyên bản), tôi thấy văn bản "nội dung trong bóng tối" (nghĩa là tập lệnh của tôi đã chạy và các chức năng ShadyDOM hoạt động), nhưng tôi không thấy nền màu hồng.
Tại sao chuyện này đang xảy ra? Tôi đang đính kèm một gốc bóng tối với một div cũ đơn giản, thay vì sử dụng các yếu tố tùy chỉnh như ví dụ trong ShadyCSS README, nhưng điều đó có quan trọng không? Nếu vậy, làm thế nào tôi có thể làm cho công việc này? Tôi đang làm việc trên một ứng dụng lớn, hiện có và không muốn thực hiện quá nhiều thay đổi cùng một lúc, vì vậy tôi rất thích sử dụng các yếu tố HTML tiêu chuẩn mà tôi đang sử dụng ( divs, buttons, v.v.) thay vì đi kèm với các phần tử hoặc mẫu riêng , mặc dù tôi sẽ sẵn sàng xem xét các mẫu và / hoặc các phần tử tùy chỉnh nếu nó có thể được thực hiện dễ dàng, mà không phải thực hiện nhiều thay đổi lớn.
:hostkhỏi bộ chọn CSS, thì các kiểu sẽ được áp dụng. Nhưng chúng cũng được áp dụng cho những thứ bên ngoài gốc bóng tối mà tôi không muốn.
ShadyCSS.styleElement(element)và ShadyCSS. styleSubtree(element)và họ đã không làm việc.
stylethẻ vào đúng vị trí và điều chỉnh kích thước phù hợp. Nó rất chậm trong việc kết xuất và xử lý cồng kềnh, vì vậy tôi đã thay đổi nó để sử dụng Shadow DOM. Bây giờ, nó hoạt động rất đẹp trong tất cả các trình duyệt không phải của Microsoft. Tôi đang cố gắng làm cho nó hoạt động trong Edge và IE bằng cách sử dụng polyfill, nhưng nó không hoạt động.
styleyếu tố trực tiếp đến khu vực nộidivthay vì gốc rễ bóng, phụ thêm cácstyleyếu tố sau phụ bên trongdiv, và thiết lậpinnerHTMLcácstyleyếu tố sau khi thêm nó. Nhưng không có những điều đó giúp được.