Question

我正在创建一个element，然后想向其添加一个事件监听器。我在做：

console.log('about to create modal');
this.createModal(
  'There are unsubmitted changes in this Access Request.',
  'Do you wish to discard them?',
  'Yes',
  'No',
  'tabCloseModal'
);
console.log('created modal');
const modal = this.shadowRoot.querySelector('#tabCloseModal');
console.log(`modal = ${modal}`);
modal.addEventListener('px-modal-accepted', function(e) {
  console.log('removing tab');
  this.removeTab(index);
});

createModal在其中创建元素的地方：

  createModal(headerText, bodyText, acceptText, rejectText, id, opened = true) {
    const modal = document.createElement('px-modal');
    //assign parameters
    document.swQuerySelector('body').appendChild(modal);
    console.log('Child appended');
    modal.visible = true;
    this.fire('modal-visible');
  }

无论我做什么（我累了swQuerySelector，swQuerySelectorAll，querySelector，querySelectorAll），我似乎都无法掌握模态。当我记录它时，它只是显示为空，未定义或[object Object]或类似的东西，而我从没去过'remove tab'。我想念什么？正在显示模式，但是接受的事件侦听器的映射不起作用。

Answer 1

要解决此问题：

从createModal返回模态，并确认其在调用代码中按预期工作。
如果是，则问题出在您的this.shadowRoot.querySelector行中。在该点设置一个断点，并尝试在devtools querySelector中到command line的一些路径，直到获得模态。尝试在devtools elements窗口中找到模式，以查看其位置。没有看到您的DOM的布局，我们无法建议父元素的确切路径。

Shadow DOM有时会变得“阴暗” ...

在DOM中按ID获取元素

1 个答案: