Доступ к элементу веб-компонента из себя

Question

Я только что начал играть с веб-компонентами (vanilla), и я хотел бы, чтобы пользователь мог программно выполнять действия над компонентом (например, "сдвинуть компонент слева").

Я думал (поправьте меня, если есть лучший способ) для отправки / запуска событий на компоненте и чтобы компонент прослушивал эти события.

<custom-element>
    // ...
</custom-element>

var customElement = document.querySelector('.custom-element');
customElement.dispatchEvent(new Event('slideLeft'));

Затем в компоненте мне нужно слушать это.. Но я не знаю, как получить доступ к <custom-element> Элемент здесь.

// Gets a handle to this import doc.
var importDoc = document.currentScript.ownerDocument;

// Creates an object based in the HTML Element prototype.
var element = Object.create(HTMLElement.prototype);

// Fires when an instance of the element is created.
element.createdCallback = function () {
    // Create a shadow root.
    var shadow = this.createShadowRoot();

    // Get a reference to the template.
    var template = importDoc.querySelector('#custom-element-tpl');

    // Append a deep clone of the template into the shadow.
    shadow.appendChild(template.content.cloneNode(true));
};

document.registerElement('custom-element', {
    prototype: element
});

Благодарю.

Answer 1

Хорошо, это было довольно очевидно, когда я думал об этом, но оставил здесь для справки:

Вы можете получить доступ к текущему элементу, используя this контекст внутри createdCallback.. что то, что createShadowRoot называется на.

// Fires when an instance of the element is created.
element.createdCallback = function () {
    // this = <custom-element></custom-element>
    this.addEventListener(...);
});