slot - garevna/js-course GitHub Wiki

ico25 slot

Классная фича, которая позволяет динамически изменять контент элемента

warn Поддержка в браузерах еще не полная, Edge пока догоняет вечнозеленые

cap 1

Пример с именованным слотом

Здесь все элементарно:

В шаблоне разметки мы вставим именованный слот:

<slot name="script">Default script</slot>

Вставим шаблон со слотом в DOM:

const template = document.body.appendChild (
    document.createElement ( "template" )
)

template.innerHTML = `
    <style>
        .code { color: magenta; }
        .div { border: inset 1px; padding: 10px 20px; }
    </style>
    <div class="div">
        <p class="code"><slot name="script">Default script</slot></p>
    </div>
`

Теперь можно динамически изменять текст внутри слота

Давайте для начала создадим кастомный элемент sample-element с этим шаблоном разметки:

customElements.define( 'sample-element',
  class extends HTMLElement {
    constructor() {
      super()
      const shadowRoot = this.attachShadow({ mode: 'open' })
        .appendChild( template.content.cloneNode(true) )
  }
})

Создадим переменную codeText, в которой будем хранить текст для вставки:

let codeText = `
function () {
    console.log ( "Hello!" )
}`

Теперь можно вставлять кастомный элемент на страницу с заданным контентом:

document.body.appendChild (
    document.createElement ( "sample-element" )
).appendChild(
    (
        text => {
            let elem = document.createElement ( "pre" )
            elem.setAttribute ( "slot", "script" )
            elem.innerText = text
            return elem
        }
    )( codeText )
)

Вот и все!

Полный код сниппета:
const template = document.body.appendChild (
    document.createElement ( "template" )
)

template.innerHTML = `
    <style>
        .code { color: magenta; }
        .div { border: inset 1px; padding: 10px 20px; }
    </style>
    <div class="div">
        <p class="code"><slot name="script">Default script</slot></p>
    </div>
`

customElements.define( 'sample-element',
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild( template.content.cloneNode(true) );
  }
})

let codeText = `
function () {
    console.log ( "Hello!" )
}`

document.body.appendChild (
    document.createElement ( "sample-element" )
).appendChild(
    (
        text => {
            let elem = document.createElement ( "pre" )
            elem.setAttribute ( "slot", "script" )
            elem.innerText = text
            return elem
        }
    )( codeText )
)
cap 2

© Irina H.Fylyppova 2018

⚠️ **GitHub.com Fallback** ⚠️