Лучшая практика
Во-первых, суть использования концепций Shadow DOM заключается в том, чтобы обеспечить охват / закрытие веб-компонентов, чтобы люди не могли просто совать их и портить.В принципе, это похоже на локальную переменную области действия внутри функции, которой не может коснуться более высокая область видимости.На практике можно обойти эту «стену» и разобраться с ней, но она разрушает «дух» теневого DOM, что в ИМО является плохой практикой.
Итак, если бы я посоветовал какую-то лучшую практику по любому из этих вопросов, мой первый совет - как можно больше, уважать дух веб-компонентов, использующих теневой DOM, и относиться к ним как к черному ящику, который онистремиться быть.Это означает, что вам следует обратиться к веб-разработчикам, отвечающим за веб-компонент, и попросить их предоставить интерфейс для использования.
Например, Adobe Launch имеет возможность прослушивать пользовательские события, транслируемые на (легкий) DOM, поэтому разработчики сайта могут добавлять в свой веб-компонент, создавать пользовательские события и транслировать их по нажатию кнопки.,
Примечание: Пользовательский прослушиватель событий запуска будет прослушивать только пользовательские трансляции событий, начинающиеся с document.body, , а не document, поэтому обязательно создайтеи транслировать пользовательские события на document.body или глубже.
"Но разработчики ничего не сделают, поэтому я должен взять дело в свои руки ..."
К сожалению, это чаще всего реальность, поэтому ты должен делать то, что должен.Если это так, то в настоящее время у Launch нет нативных функций, которые действительно облегчили бы вам жизнь в этом отношении (во всяком случае, для «основной» части нижеприведенного материала), и на этом посту AFAIK естьнет публичных расширений, которые предлагают что-либо для этого, либо.Но это не значит, что вы SoL.
Но я хочу заявить, что я не уверен, что поспешил бы назвать остальную часть этого ответа "Лучшая практика", а не "Это '' '1029 * решение ...",Главным образом потому, что это в основном включает в себя просто выгрузку большого количества чистого javascript в специальное поле кода и вызов его за день, что является более универсальным решением в крайнем случае.
Между тем, как правило, рекомендуется избегать использования пользовательских полей кода, когда речь идет о менеджерах тегов, если это не требуется.Весь смысл менеджеров тегов состоит в том, чтобы абстрагировать код.
Я думаю, что TL; DR здесь, в основном, я повторяю это, что в идеале должно быть помещено на сайт разработчика сайта.Но если вам все-таки действительно нужно сделать все это в Launch, потому что причины TM , продолжайте читать.
'A' Solution ...
Примечание: Это действительно базовый пример с простым сценарием теневого DOM с открытым режимом - в действительности ваш сценарийпочти наверняка намного сложнее.Я ожидаю, что вы узнаете, что вы делаете с javascript, если вы углубитесь в это!
Допустим, у вас есть следующее на странице.Простой пример пользовательского HTML-элемента с кнопкой, добавленной в его теневой DOM.
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({
mode: 'open'
});
var button = document.createElement('button');
button.id = 'myButton';
button.value = 'my button value';
button.innerText = 'My Button';
this._shadowRoot.appendChild(button);
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component id='myComponentContainer'></my-component>
Допустим, вы хотите активировать правило, когда посетитель нажимает кнопку.
Пример быстрого решения
В этот момент я, вероятно, должен сказать, что вы можете обойтись без выполнения правила события Launch click с селектором запросов my-component#myComponentContainer с пользовательским кодомусловие вдоль линий:
return event.nativeEvent.path[0].matches('button#myButton');
Нечто подобное должно работать для этого сценария, потому что здесь выровнено много звездочек:
- Теньdom - это открытый режим, так что никаких хаков для перезаписи вещей
- Существуют легко идентифицируемые уникальные селекторы css для уровней DOM света и тени
- Вы просто хотите прослушать событие click, которое всплываети действует как щелчок по легкому корню DOM теневого корня.
На практике ваши требования, вероятно, не будут такими простыми.Возможно, вам нужно подключить какой-либо другой прослушиватель событий, например, событие воспроизведения видео.К сожалению, на данный момент не существует решения «один размер подходит всем»;это зависит только от ваших требований к отслеживанию.
Но в целом цель почти такая же, как и то, что вы бы попросили разработчиков: создать и передать собственное (светлое) событие DOM в контексте теневого DOM.
Пример лучшего решения
Используя тот же пример компонента и требования, что и выше, вы можете, например, создать правило для запуска в DOM Ready.Назовите это как «Отслеживание моих компонентов - ядро» или как угодно.Никаких условий, если только вы не хотите что-то сделать, например, проверить, существует ли элемент DOM корневого легкого веб-компонента или что-то еще.
В целом, это основной код для присоединения прослушивателя событий к кнопке и отправки пользовательского события для прослушивания Launch.Обратите внимание, этот код основан на нашем примере компонентов и требованиях к отслеживанию, приведенным выше.Это уникально для этого примера.Вам нужно будет написать похожий код на основе ваших собственных настроек.
Добавьте пользовательский контейнер js с чем-то вроде этого:
// get the root (light dom) element of the component
var rootElement = document.querySelector('#myComponentContainer');
if (rootElement && rootElement.shadowRoot) {
// get a reference to the component's shadow dom
var rootElementDOM = rootElement.shadowRoot;
// try and look for the button
var elem = rootElementDOM.querySelector('button#myButton');
if (elem) {
// add a click event listener to the button
elem.addEventListener('click', function(e) {
// optional payload of data to send to the custom event, e.g. the button's value
var data = {
value: e.target.value
};
// create a custom event 'MyButtonClick' to broadcast
var ev = new CustomEvent('MyButtonClick', {
detail: data
});
// broadcast the event (remember, natively, Launch can only listen for custom events starting on document.body, not document!
document.body.dispatchEvent(ev);
}, false);
}
}
Здесь вы можете создать новое правило, которое будет прослушивать трансляцию пользовательского события.
Пример пользовательского правила события
Rule name: My Button clicks
События
Extension: Core
Event Type: Custom Event
Name: MyButtonClick
Custom Event Type: MyButtonClick
Elements matching the CSS selector: body
Условия
*None for this scenario*
Здесь вы можете установить любые Действия , которые вы хотите (установить переменные Adobe Analytics, отправить маяк и т. Д.).
Примечание: В этом примере я отправил данные в пользовательское событие.Вы можете ссылаться на полезную нагрузку в любом произвольном (javascript) кодовом поле с помощью event.detail, например event.detail.value.Вы также можете ссылаться на них в полях запуска с помощью синтаксиса %, например %event.detail.value%.