Element.slot
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨ÑнваÑÑ 2020 г.â©.
СвойÑÑво slot инÑеÑÑейÑа Element возвÑаÑÐ°ÐµÑ Ð¸Ð¼Ñ ÑлоÑа Ñеневого DOM, в коÑоÑÑй вÑÑавлен ÑлеменÑ.
Ð¡Ð»Ð¾Ñ slot ÑÑо заполниÑÐµÐ»Ñ Ð²Ð½ÑÑÑи веб компоненÑа, коÑоÑÑй полÑзоваÑели могÑÑ Ð·Ð°Ð¿Ð¾Ð»Ð½Ð¸ÑÑ ÑобÑÑвенной ÑазмеÑкой (ÑмоÑÑи ÐÑполÑзование Ñаблонов и ÑлоÑов Ð´Ð»Ñ Ð¿Ð¾Ð»ÑÑÐµÐ½Ð¸Ñ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑелÑной инÑоÑмаÑии).
СинÑакÑиÑ
var aString = element.slot element.slot = aString
ÐнаÑение
ÐÑимеÑÑ
РнаÑем пÑимеÑе пÑоÑÑого Ñаблона (ÑмоÑÑи в пÑÑмом ÑÑиÑе), Ð¼Ñ ÑоздаÑм ÑÑивиалÑнÑй пÑÐ¸Ð¼ÐµÑ Ð¿Ð¾Ð»ÑзоваÑелÑÑкого ÑлеменÑа Ñ Ð¸Ð¼ÐµÐ½ÐµÐ¼ <my-paragraph>, в коÑоÑом пÑикÑеплÑеÑÑÑ Ñеневой коÑенÑ, а заÑем заполнÑеÑÑÑ Ñ Ð¸ÑполÑзованием ÑодеÑжимого Ñаблона, ÑодеÑжаÑего ÑÐ»Ð¾Ñ Ñ Ð¸Ð¼ÐµÐ½ÐµÐ¼ my-text.
Ðогда в докÑменÑе иÑполÑзÑеÑÑÑ <my-paragraph>, ÑÐ»Ð¾Ñ Ð·Ð°Ð¿Ð¾Ð»Ð½ÑеÑÑÑ ÑлоÑ-ÑлеменÑом, вклÑÑÐ°Ñ ÐµÐ³Ð¾ в ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ñ Ð°ÑÑибÑÑом slot Ñо знаÑением my-text. ÐÐ¾Ñ Ð¾Ð´Ð¸Ð½ из ÑакиÑ
пÑимеÑов:
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
РнаÑем JavaScript Ñайле Ð¼Ñ Ð¿Ð¾Ð»ÑÑаем ÑÑÑÐ»ÐºÑ <span>, показаннÑÑ Ð²ÑÑе, а заÑем ÑегиÑÑÑиÑÑем ÑÑÑÐ»ÐºÑ Ð½Ð° Ð¸Ð¼Ñ ÑооÑвеÑÑÑвÑÑÑего ÑлеменÑа <slot>.
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'
СпеÑиÑикаÑии
| Specification |
|---|
| DOM > # ref-for-dom-element-slotâ > |