doka-guide · DrakesBot12 · Aug 4, 2025 · Aug 4, 2025 · Aug 4, 2025 · Aug 4, 2025
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Демонстрация :defined — :defined — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      align-items: center;
+    }
+
+    custom-element, custom-element:not(:defined) {
+      display: block;
+      min-width: 320px;
+      min-height: 120px;
+      border: 2px solid;
+      border-radius: 1rem;
+      font-size: 1.2rem;
+      padding: 2rem 1.5rem;
+      position: relative;
+      background: none;
+      transition: all 0.3s;
+    }
+
+    custom-element:not(:defined) {
+      border-color: grey;
+      color: grey;
+      background: #222;
+    }
+
+    custom-element:defined {
+      background-color: wheat;
+      border-color: black;
+      color: black;
+    }
+
+    /* Показываем сообщение загрузки */
+    custom-element:not(:defined)::before {
+      content: "Загрузка…";
+      position: absolute;
+      inset: 0 0 0 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-size: 2rem;
+      background-color: #fff;
+      color: #222;
+      border-radius: 1rem;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    /* Убираем сообщение после определения */
+    custom-element:defined::before {
+      content: "";
+      display: none;
+    }
+
+    button {
+      font-family: inherit;
+      font-size: 1.1rem;
+      padding: 0.7em 1.5em;
+      border-radius: 0.7em;
+      border: none;
+      background: #ff8630;
+      color: #fff;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    button:hover, button:focus {
+      background: #ffb47f;
+      color: #222;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <custom-element>
+      <h1 slot="title">Кастомный элемент</h1>
+      <p slot="content">Контент появился после инициализации</p>
+    </custom-element>
+    <button id="btn">Определить элемент</button>
+  </div>
+  <template id="custom-element-template">
+    <style>
+      .card {
+        border-radius: 16px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+        padding: 24px 27px;
+        min-width: 320px;
+        max-width: 400px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        background: #fffbe7;
+      }
+      ::slotted(h1) {
+        font-weight: bold;
+        color: #FF8630;
+        margin-bottom: 8px;
+        font-size: 2rem;
+      }
+      ::slotted(p) {
+        font-size: 1.2rem;
+      }
+    </style>
+    <div class="card">
+      <slot name="title">Пустой элемент 😔</slot>
+      <slot name="content"></slot>
+    </div>
+  </template>
+  <script>
+    const btn = document.querySelector("#btn");
+
+    btn.addEventListener("click", () => {
+      if (!customElements.get("custom-element")) {
+        class CustomElement extends HTMLElement {
+          constructor() {
+            super();
+            const shadow = this.attachShadow({ mode: "open" });
+            const template = document.getElementById("custom-element-template");
+            shadow.appendChild(template.content.cloneNode(true));
+          }
+        }
+        customElements.define("custom-element", CustomElement);
+      }
+      btn.remove();
+    });
+  </script>
+</body>
+</html>
@@ -0,0 +1,125 @@
+---
+title: "`:defined`"
+description: "Псевдокласс `:defined` позволяет применять стили только к тем элементам, которые уже зарегистрированы как кастомные компоненты."
+authors:
+  - drakesbot12
+keywords:
+  - кастомные
+  - элементы
+  - web-components
+  - custom-elements
+  - :defined
+  - shadow
+  - dom
+related:
+  - css/host
+  - html/part
+  - js/element-attachshadow
+tags:
+  - doka
+---
+
+## Кратко
+
+Псевдокласс `:defined` выбирает только те элементы, которые уже зарегистрированы в браузере как кастомные. Это позволяет стилизовать только определённые компоненты и, например, задать разные стили до и после их инициализации.
+
+## Пример
+
+```html
+<div class="container">
+  <custom-element>
+    <h1 slot="title">Кастомный элемент</h1>
+    <p slot="content">Контент появился после инициализации</p>
+  </custom-element>
+  <button id="btn">Определить элемент</button>
+</div>
+
+<template id="custom-element-template">
+  <style>
+    ::slotted(h1) {
+      font-weight: bold;
+      color: #FF8630;
+      margin-bottom: 8px;
+      font-size: 2rem;
+    }
+
+    ::slotted(p) {
+      font-size: 1.2rem;
+    }
+  </style>
+  <div class="card">
+    <slot name="title">Пустой элемент 😔</slot>
+    <slot name="content"></slot>
+  </div>
+</template>
+```
+
+```css
+custom-element:not(:defined) {
+  border-color: grey;
+  color: grey;
+  background: #222;
+}
+
+custom-element:defined {
+  background-color: wheat;
+  border-color: black;
+  color: black;
+}
+```
+
+```js
+const btn = document.querySelector("#btn");
+
+btn.addEventListener("click", () => {
+  if (!customElements.get("custom-element")) {
+    class CustomElement extends HTMLElement {
+      constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: "open" });
+        const template = document.getElementById("custom-element-template");
+        shadow.appendChild(template.content.cloneNode(true));
+      }
+    }
+    customElements.define("custom-element", CustomElement);
+  }
+  btn.remove();
+});
+```
+
+<iframe title="Демонстрация :defined" src="demos/basic/" height="320"></iframe>
+
+## Как пишется
+
+Псевдокласс используется как обычный селектор:
+
+```css
+web-component:defined {
+  /* стили, когда компонент зарегистрирован */
+}
+```
+
+Можно комбинировать с другими селекторами:
+
+```css
+my-box:defined:hover {
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+}
+```
+
+## Как понять
+
+Когда вы вставляете на страницу кастомный элемент вроде `<my-widget>`, он сначала появляется как неизвестный тег. До тех пор, пока скрипт не выполнится и не вызовет [`customElements.define('my-widget', ...)`](/js/window-customelements), он считается неопределённым.
+
+Псевдокласс `:defined` позволяет разделить стили до и после определения. Это особенно удобно для:
+
+- Плавной загрузки интерфейса
+- Предотвращения странной отрисовки до инициализации
+- Анимаций и переходов после готовности
+
+## Подсказки
+
+💡 Если компонент уже определён до вставки в [DOM](/js/dom/) — `:defined` сработает сразу.
+💡 Полезно использовать `:not(:defined)`, чтобы стилизовать «заглушки» до загрузки компонентов.
+💡 Работает только с кастомными тегами — вроде `<my-dialog>`. Не применимо к обычным HTML-тегам.
+💡 Можно использовать как индикатор загрузки — например, показывать лоадер внутри неинициализированного компонента.
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>:has-slotted — пример — :has-slotted — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      font-size: 16px;
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      font-size: 2rem;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    .container {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <template id="my-element-template">
+    <style>
+      :has-slotted {
+        color: green;
+      }
+      :not(:has-slotted) {
+        color: red;
+      }
+    </style>
+    <slot><code>:has-slotted</code> Не работает!</slot>
+  </template>
+  <div class="container">
+    <my-element>
+      <code>:has-slotted</code> Работает!
+    </my-element>
+    <my-element></my-element>
+  </div>
+
+  <script>
+    class MyElement extends HTMLElement {
+      constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: 'open' });
+        const template = document.getElementById('my-element-template');
+        shadow.appendChild(template.content.cloneNode(true));
+      }
+    }
+
+    customElements.define('my-element', MyElement);
+  </script>
+</body>
+</html>