Атрибут name позволяет создавать именные слоты, чтобы вставлять содержимое в определённое место. Обычно именные слоты используются в пользовательских элементах, где требуется добавлять несколько данных.
К примеру, для компонента блока применяется следующий шаблон.
<section class="block">
<header>
<!-- Заголовок блока -->
</header>
<div class="block-content">
<!-- Содержимое блока -->
</div>
</section>
В таком случае, чтобы различать слоты, мы используем атрибут name. Теперь заголовок блока и его содержимое будут размещаться в указанных нами местах.
<section class="block">
<header>
<slot name="header"></slot>
</header>
<div class="block-content">
<slot name="content"></slot>
</div>
</section>
Синтаксис
<slot name="<имя слота>"></slot>
Значения
Любой текст без пробелов.
Значение по умолчанию
Нет.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>slot</title>
<script>
customElements.define('my-example', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.append(tmpl.content.cloneNode(true));
}
});
</script>
</head>
<body>
<template id="tmpl">
<style>
.example-title {
background-color: #742119;
color: #d9d9d9;
margin: 0;
padding: 1rem;
font: bold 1rem Arial, Helvetica, sans-serif;
}
.example-content {
background-color: #404040;
color: #d9d9d9;
padding: 1rem;
margin: 0 0 2rem;
font: 1.1rem 'Courier New', Courier, monospace;
}
</style>
<div class="example">
<div class="example-title"><slot name="title"></slot></div>
<pre class="example-content"><code><slot name="code"></slot></code></pre>
</div>
</template>
<my-example>
<div slot="title">Пример на LaTex</div>
<div slot="code">x_{12}=\frac{-b\pm\sqrt{b^2-4ac}}{2a}</div>
</my-example>
<my-example>
<div slot="title">Пример на MathML</div>
<div slot="code"><math display="block">
<mrow>
<msub>
<mi>x</mi><mn>12</mn>
</msub>
<mo>=</mo>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi><mo>±</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi><mn>2</mn>
</msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn><mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math></div>
</my-example>
</body>
</html>
В данном примере создаётся пользовательский элемент <my-example> для вывода примеров. С помощью элемента <template> формируется шаблон кода этого элемента, а <slot> с атрибутом name указывает, в какое место кода вставить заголовок примера и его код.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.