Javascript Web-Components - 添加功能到影子-DOM

Question

我正在为我的网站开发新的网络组件，它与 html/css 一起工作得很好。但是，我无法向我的阴影 DOM 添加某种 javascript 功能。

在我的例子中，它是关于组件内的一个按钮，它应该触发一个处理事件的函数。尽管如此，我总是收到一个错误，指出函数未定义。我知道阴影 DOM 应该保护里面，但我不知道如何正确实现我的 js。希望你能帮忙:)

class InfoSmall extends HTMLElement {
// attributes
constructor() {
  super();
  // not important
}

// component attributes
static get observedAttributes() {
  return [''];
}

// attribute change
attributeChangedCallback(property, oldValue, newValue) {
  if (oldValue == newValue) return;
  this[ property ] = newValue;
};

connectedCallback() {
  const shadow = this.attachShadow({ mode: 'open' });

  shadow.innerHTML = `
  <div class="container>
     <button id="copy"></button>
  </div>`

  shadow.querySelector('#copy').addEventListener("click", function () {
    // functionality
  });
}
}

我也尝试了 onclick-attribute 但它对我来说是一样的：没有定义函数。或者我也尝试在 HTML 内部使用 HTML-tag 编写 脚本...

Answer 1

您创建的 HTML 无效，因为 class="container>

上缺少双引号

您的代码可以压缩为：

<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor() {
      super() // sets AND returns 'this' scope
        .attachShadow({mode: 'open'}) // sets AND returns this.shadowRoot
        .innerHTML = `<div class="container">
                        <button>Click Me!</button>
                      </div>`;
      this.shadowRoot
          .querySelector('button')
          .onclick = () => {
                             alert("YEAH!")
                           };
    }
  });
</script>

<my-element></my-element>

Javascript Web-Components - 添加功能到影子-DOM

Javascript Web-Components - Add function to the shadow-DOM

javascript

web-component