방금 웹 구성 요소 (바닐라)를 사용하기 시작했으며 사용자가 구성 요소에 대해 프로그래밍 방식으로 작업을 수행 할 수 있기를 바랍니다 (예 : "구성 요소를 왼쪽으로 슬라이드").
구성 요소에서 이벤트를 발송 / 트리거하고 구성 요소가 이러한 이벤트를 수신하도록 (더 나은 방법이있는 경우 수정) 생각하고있었습니다.
<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
});
감사.
Ok 이것은 내가 그것에 대해 생각했을 때 다소 분명했지만 참고를 위해 여기에 남겨 둡니다.
.. this내부의 컨텍스트를 사용하여 현재 요소에 액세스 할 수 있습니다 .createdCallbackcreateShadowRoot
// Fires when an instance of the element is created.
element.createdCallback = function () {
// this = <custom-element></custom-element>
this.addEventListener(...);
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다