我有两个带阴影DOM的自定义元素。一个是调度自定义事件的按钮，另一个是侦听该事件的对话框。未收到该活动。
<GridLayout rows="*, auto, auto, auto, 2*">
修正了：错误发生在HTML标记中，其中//button.ts
export class ModalButton extends HTMLElement {
constructor() {
super();
let _shadowRoot = this.attachShadow({ mode: 'open' });
let button = document.createElement('button');
_shadowRoot.appendChild(button);
button.addEventListener('click', () => {
button.dispatchEvent(new CustomEvent('modal-open', {
bubbles: true,
composed: true
}));
});
}
}
//modal.ts
export class ModalDialog extends HTMLElement {
constructor() {
super();
let _shadowRoot = this.attachShadow({ mode: 'open' });
let dialog = <HTMLDialogElement>document.createElement('dialog');
_shadowRoot.appendChild(dialog);
_shadowRoot.addEventListener('modal-open', () => {
dialog.showModal();
});
}
}
// index.ts
import { ModalButton } from './button';
import { ModalDialog } from './modal';
customElements.define('ce-modal', ModalDialog);
customElements.define('ce-button', ModalButton);
和<ce-button>是兄弟姐妹。这个事件（当然！）无法冒泡/传播到模态......
我现在将<ce-modal>添加到ce-button的影子dom中，并仅在HTML标记中使用ce-modal。