Когда я приходил на конференции и видел презентации на тему веб-компонентов, я всегда думал, что это не только изящно, но и довольно сложно. Докладчик или неизбежно скрывал за простыми вещами огромное количество JS кода, или погружался в сложные детали, тогда мои глаза начинали закрываться от скуки, и я начинал думать о том, покрывают ли мои суточные выплаты расходы на закуски. Однако в недавнем проекте , созданном для легкого изучения HTML Конечно, путем добавления зомби и глупых шуток , я решил, что необходимо описать каждый элемент HTML в спецификации. Либо веб-компоненты прошли долгий путь развития с тех пор, как я мечтал о закусках на конференции, либо я позволил моему изначальному страху помешать по-настоящему узнать их, а возможно и то, и другое. Я здесь, чтобы сказать вам: да, вы можете создать веб-компонент.

Подразумевается, что уже изучили и разобрались с разделом Основы компонентов. Если нет — прочитайте его сначала. Веб в таком слоте будет доступ к тем же свойствам экземпляра то есть к той же «области видимости»как и веб остальной части шаблона. Поэтому веб обратиться к входному слоту action не сработает:. Всё в родительском слоте компилируется в области видимости родительского слота всё веб шаблоне дочернего компилируется в области видимости дочернего компонента. Часто полезно указать содержимое слота по умолчанию, которое будет использоваться только когда ничего не передаётся в слот. Удобнее указать текст по умолчанию «Отправить», который будет отображаться большую часть времени. Зачастую удобно веб несколько слотов. Иногда в содержимом слота может потребоваться слот к данным, доступным только в дочернем компоненте. Частый случай подобного — слот в компоненте отображается массив элементов, и нужна возможность управлять отрисовкой каждого слота. Теперь, в родительской области веб, можно веб v-slot со значением, чтобы определить имя переменной с входными параметрами, привязанными взято отсюда слоту:. В этом слоте объект со всеми входными параметрами слота будет с именем slotPropsно можно использовать и любое другое, которое нравится. Если указывается содержимое только для веб по умолчаниюто можно использовать тег компонента в качестве шаблона слота и можно указывать v-slot сразу на компоненте:. Такую запись можно сократить веб. Предполагается, что содержимое относится к слоту по умолчанию, веб иного не указано явно, поэтому v-slot без аргумента означает слот по умолчанию:. Обратите внимание, что подобный сокращённый синтаксис для слота по умолчанию веб смешивать с именованными слотами, потому веб это приводит к неоднозначности области видимости:. Под капотом, слоты с ограниченной областью видимости оборачивают своё содержимое слота в функцию, которая аргументом принимает входные параметры:. Поэтому значение v-slot может быть любым допустимым выражением JavaScript, которое допустимо использовать на позиции слота определения функции. Например можно применять деструктурирование ES opens new windowчтобы получать определённые входные слоты слота:. Такой подход делает шаблон веб чище, веб если у слота веб входных параметров. Это открывает и другие возможности, например, переименование свойства item в todo используемого входного параметра:. Кроме того, можно определить значение по умолчанию, которое будет использоваться если увидеть больше слот для слота не был определён:. Динамические слоты директивы работают и с v-slotчто позволяет установить динамическое имя слота:. Кроме v-on и v-bindесть сокращённая запись и у v-slot веб, которая заменяет всё перед аргументом v-slot: на символа v-slot:header можно сократить до header :. Однако, как и с другими директивами, сокращение можно использовать только при наличии слота и следующий синтаксис будет неправильным:. Слоты Подразумевается, что уже изучили и разобрались с слотом Веб компонентов.

.

Список заказных кодов

Выполните обновление до Microsoft Edge, чтобы воспользоваться новейшими функциями, обновлениями для системы безопасности и технической поддержкой. Когда вы развертываете свое веб-приложение, веб-приложение в Linux, мобильную серверную часть или приложение API в Службе приложений Azure , вы можете использовать отдельный слот развертывания вместо производственного слота по умолчанию, когда вы работаете в Стандартный , Премиум или Изолированный уровень плана службы приложений. Слоты развертывания представляют собой работающие приложения с собственными именами хостов. Элементы конфигурации и содержимое приложений можно переключать между двумя слотами развертывания, включая рабочий слот. Каждый уровень плана службы приложений поддерживает разное количество слотов развертывания.

В этой статье

Эта страница была переведена с английского языка силами сообщества. Веб-компоненты - это набор различных технологий, позволяющих создавать повторно используемые настраиваемые элементы с их функциональностью, инкапсулированной отдельно от остальной части вашего кода - и использовать их в ваших веб-приложениях. Как разработчики, все мы знаем, что как можно больше повторного использования кода - хорошая идея. Традиционно это было не так просто для пользовательских структур разметки - подумайте о сложном HTML и связанном с ним стиле и сценарии , которые вам иногда приходилось писать для визуализации пользовательских элементов управления UI, и о том, как их многократное использование может превратить вашу страницу в беспорядок если вы не будете осторожны. Веб-компоненты направлены на решение таких проблем - они состоят из трёх основных технологий, которые можно использовать вместе для создания универсальных настраиваемых элементов с инкапсулированной функциональностью, которые можно повторно использовать где угодно, не опасаясь коллизий кода. Руководство, показывающее, как использовать функции настраиваемых элементов для создания простых веб-компонентов, а также рассказывает про колбэки жизненного цикла и некоторые другие более сложные функции. Руководство, которое рассматривает основы теневой DOM, показывает, как прикрепить теневую DOM к элементу, добавлять к теневому дереву DOM, стилизовать его и многое другое. Содержит функции, связанные с настраиваемыми элементами, в первую очередь с методом CustomElementRegistry. Специальные колбэк-функции, определённые внутри определения класса настраиваемого элемента, которые влияют на его поведение:. Содержит фрагмент HTML, который не отображается при первоначальной загрузке содержащего документа, но может отображаться во время выполнения с помощью JavaScript, который в основном используется в качестве основы для структур настраиваемых элементов. Заполнитель внутри веб-компонента, который можно заполнить собственной разметкой, что позволяет создавать отдельные деревья DOM и представлять их вместе. Миксин определяет один атрибут, Slotable.