自定义 Web 组件回调

Question

我很难解释这个。我正在构建一个自定义组件，在这个组件中有一个按钮。我需要能够动态设置该按钮的单击操作，以便它的操作可以根据上下文进行更改。所以如果这个组件有 2 个实例 a 和 b，每个实例都有一个不同的函数，当它们里面的按钮被点击时执行。我以为我可以将一个函数分配给组件的属性并从组件内部执行属性，如下所示：

window.customElements.define('xmp-1', class xmp1 extends HTMLElement{
  constructor(){super();}
  connectedCallback(){
    this.innerHTML = `
      <div>
        <div id='test' style='width:70px; border:solid thin black;'>test button</div>
      </div>`;
    this.querySelector('#test').addEventListener('click', function(){
      console.log('test action');
      this.action1();
    });
  }
});

document.querySelector('xmp-1').action1 = function(){
  console.log("this is the callback");
};

<xmp-1></xmp-1>

但是当您运行时，您会收到一条错误消息，提示属性 action1 不存在。

设置允许我需要的灵活性的回调的正确方法是什么？

Answer 1

更新：请尝试下面的代码，我在其中添加了一个绑定语句来绑定 "this"

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body>
    <xmp-1></xmp-1>
    <script>
        document.querySelector('xmp-1').action1 = function(){
            console.log("this is the callback");
        };
        window.customElements.define('xmp-1', class xmp1 extends HTMLElement {
            constructor() { super(); 
                this.handler = this.handler.bind(this);
            }
            handler() {
                console.log("this is the test");
                console.log('test action');
                this.action1();
            }

            connectedCallback() {
                this.innerHTML = `<div>
                    <div id='test' style='width:70px; border:solid thin black;'>test button</div>
                    </div>`;
                this.querySelector('#test').addEventListener('click',this.handler);
            }
        });
    </script>
</body>
</html>

请将代码中的 xmp-1 更改为 #test，如下所示，

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body>
    <xmp-1></xmp-1>
    <script>
        window.addEventListener('load', (event) => {

            document.querySelector('#test').action1 = function(){
                console.log("this is the callback");
            };

        });
        window.customElements.define('xmp-1', class xmp1 extends HTMLElement {
            constructor() { super(); }

            connectedCallback() {
                this.innerHTML = `<div>
                    <div id='test' style='width:70px; border:solid thin black;'>test button</div>
                    </div>`;
                this.querySelector('#test').addEventListener('click', function () {
                    console.log('test action');
                    this.action1();
                });
            }
        });
    </script>
</body>
</html>

或者请尝试方法 2，如下所示，您必须在自定义元素中添加名为 this.querySelector('#test').action1 的函数。

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body>
    <xmp-1></xmp-1>
    <script>
        window.customElements.define('xmp-1', class xmp1 extends HTMLElement {
            constructor() { super(); }

            connectedCallback() {
                this.innerHTML = `<div>
                    <div id='test' style='width:70px; border:solid thin black;'>test button</div>
                    </div>`;
                this.querySelector('#test').addEventListener('click', function () {
                    console.log('test action');
                    this.action1();
                });
                this.querySelector('#test').action1 = function() {
                    console.log('test action1');
                }
            }
        });
    </script>
</body>
</html>

自定义 Web 组件回调

custom web component callbacks

javascript

html

native-web-component