:defined

Cú pháp

:defined {
  /* ... */
}

Ví dụ

Ẩn các phần tử cho đến khi chúng được định nghĩa

Trong ví dụ này, chúng ta định nghĩa một phần tử tùy chỉnh cơ bản có tên <custom-element> và sử dụng các bộ chọn :not(:defined) và :defined để tạo kiểu cho phần tử trước và sau khi nó được định nghĩa. Điều này hữu ích nếu bạn có một phần tử tùy chỉnh phức tạp mất một thời gian để tải vào trang — bạn có thể muốn ẩn các thể hiện của phần tử đó cho đến khi định nghĩa hoàn tất để tránh hiện tượng các phần tử chưa được tạo kiểu xuất hiện đột ngột trên trang.

HTML

Đoạn HTML sau sử dụng phần tử tùy chỉnh nhưng phần tử đó chưa được định nghĩa. Chúng ta cũng bao gồm một <button> sẽ định nghĩa phần tử tùy chỉnh khi được nhấp, cho phép bạn thấy trạng thái của nó trước và sau khi được định nghĩa.

<custom-element>
  <p>
    Loaded content: Lorem ipsum tel sed tellus eiusmod tellus. Aenean. Semper
    dolor sit nisi. Elit porttitor nisi sit vivamus.
  </p>
</custom-element>

<button id="btn">define the <code>&lt;custom-element&gt;</code></button>

CSS

custom-element {
  display: block;
  border: 5px dashed grey;
  border-radius: 1rem;
  height: 100px;
  width: 400px;
  padding: 1rem;
  position: relative;
  user-select: none;
}

code {
  background: #cccccc;
}

#btn {
  margin-top: 1rem;
  cursor: pointer;
}

Trong CSS sau, chúng ta sử dụng bộ chọn custom-element:not(:defined) để chọn phần tử và tô màu xám khi chưa được định nghĩa, và bộ chọn custom-element:defined để chọn phần tử và tô màu đen sau khi được định nghĩa.

custom-element:not(:defined) {
  border-color: grey;
  color: grey;
}

custom-element:defined {
  background-color: wheat;
  border-color: black;
  color: black;
}

/* show loading message */
custom-element:not(:defined)::before {
  content: "Loading...";
  position: absolute;
  inset: 0;
  align-content: center;
  text-align: center;
  font-size: 2rem;
  background-color: white;
  border-radius: 1rem;
}

/* remove the loading message */
custom-element:defined::before {
  content: "";
}

Chúng ta cũng đã sử dụng phần tử giả ::before để hiển thị thông báo "Loading..." dạng lớp phủ cho đến khi phần tử được định nghĩa. Sau khi được định nghĩa, nó bị loại bỏ bằng cách đặt content thành chuỗi rỗng.

JavaScript sau đây đã được dùng để định nghĩa phần tử tùy chỉnh. Để cho phép bạn thấy trạng thái của phần tử tùy chỉnh trước và sau khi được định nghĩa, chúng ta chạy phương thức define() khi nút được nhấp.

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  customElements.define("custom-element", class extends HTMLElement {});
  btn.remove();
});

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• Web components