Soạn các phần tử tùy chỉnh với các khe cắm và khe cắm được đặt tên
Với Shadow DOM , ta có thể tạo các Thành phần Web là một thành phần giữa các thành phần bên trong của thành phần và các phần tử được cung cấp bởi user của phần tử tùy chỉnh tại thời điểm tác giả. Điều này tương tự với việc sử dụng các phần tử tùy chọn hoặc optgroup bên trong phần tử chọn root . Bố cục này có thể thực hiện được bằng cách sử dụng một cơ chế được gọi là các vị trí và ở đây ta sẽ xem xét cách sử dụng các vị trí và các vị trí được đặt tên trong các phần tử tùy chỉnh của bạn để cho phép các bố cục thú vị.
Nội dung có rãnh đầu tiên của bạn
Việc cho phép user các phần tử tùy chỉnh của bạn thêm phần đánh dấu và phần tử của riêng họ như một phần của phần tử của bạn cũng đơn giản như sử dụng phần tử vị trí trong mẫu thành phần của bạn.
Dưới đây là một ví dụ về một phần tử tùy chỉnh ngu ngốc chỉ hoạt động như một khung được tạo kiểu cho nội dung được thêm vào khi phần tử được sử dụng:
(function() { const template = document.createElement('template'); template.innerHTML = ` <style> :host { display: block; contain: content; text-align: center; background: papayawhip; max-width: 500px; margin: 0 auto; box-shadow: 0 0 10px rgba(128, 100, 38, 0.34); border-radius: 8px; border: 2px dashed #ccc049; } </style> <span class="code-annotation"><slot></slot></span> `; class MyInfoBox extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); } } Bạn đang băn khoăn về việc sử dụng : host cho kiểu phần tử của ta ? Đọc về các yếu tố tùy chỉnh tạo kiểu .
Phần tử này sau đó được dùng như sau:
<my-info-box> <p>I'm slotted content!</p> </my-info-box> Đánh dấu được thêm vào bên trong phần tử tùy chỉnh được gọi là light DOM và nó nằm ngoài phạm vi tiếp cận của Shadow DOM, như bạn thấy từ ảnh chụp màn hình phần tử này như được thấy từ Công cụ phát triển của Chrome:
Thay vào đó, các phần tử trong light DOM có thể truy cập trực tiếp khi là con của phần tử, vì vậy bạn có thể làm điều gì đó như thế này để lấy một phần tử, như bạn thường truy cập vào một phần tử trong DOM:
const myInfoBox = document.querySelector('my-info-box'); const text = myInfoBox.children[0].innerText; console.log(text); // I'm slotted content! Phần tử DOM nhẹ đang được sử dụng trong một vị trí được gọi là một nút phân tán .
Nội dung mặc định
Bạn có thể cung cấp nội dung mặc định cho một vị trí, trong trường hợp không có nội dung nào được cung cấp khi phần tử được sử dụng:
<slot> <p>I'm some default content!</p> </slot> Và nội dung mặc định này sẽ được sử dụng nếu phần tử được sử dụng như thế này:
<my-info-box></my-info-box> Slots được đặt tên
Việc tạo các phần tử phức tạp hơn có thể lấy nhiều phần nội dung khác nhau từ user của phần tử có thể được thực hiện dễ dàng bằng cách sử dụng các vị trí được đặt tên. Bạn có thể xem một ví dụ đơn giản ở đây nơi một vị trí được đặt tên được sử dụng cùng với một vị trí thông thường:
<div> <slot name="title"></slot> <hr> <slot></slot> </div> Phần tử sau đó được dùng như sau:
<my-info-box> <span slot="title">🍭 Fancy title</span> <p>I'm going straight to the anonymous slot.</p> </my-info-box> Nhờ các vị trí được đặt tên, bạn có thể dễ dàng tạo ra một phần tử tùy chỉnh phức tạp để ghép nhiều phần lại với nhau. Ví dụ: một thanh chuyển có tiêu đề, biểu trưng, các mục chuyển bên trái và các mục chuyển bên phải.
Tạo kiểu nội dung có rãnh với :: có rãnh
Ta có thể tạo kiểu cho nội dung có rãnh bằng cách sử dụng bộ chọn :: slotted () . Đây là một ví dụ rất đơn giản:
<style> ::slotted(span) { background: pink; } ::slotted(.content) { font-family: monospace; } </style> <div> <slot name="title"></slot> <hr> <slot></slot> </div> Và, với điều này, tiêu đề trong ví dụ sau sẽ có nền màu hồng và nội dung chính sẽ ở phông chữ monospace:
<my-info-box> <span slot="title">🍭 Fancy title</span> <p class="content">I'm going straight to the anonymous slot.</p> </my-info-box> Lưu ý bộ chọn được sử dụng với :: slotted nên chọn phần tử cấp cao nhất, vì nó không thể trùng với vị trí sử dụng phần tử lồng nhau.
Các tin liên quan
