将参数/输入数据传递给javascript中的自定义元素

Question

我正在尝试使用 JavaScript 实现与 this 相同的代码，因此将以下代码编写为 btn.js 文件：

// Create a new object based of the HTMLElement prototype
var SaveBtn = Object.create(HTMLElement.prototype);

// Set up the element.
SaveBtn.createdCallback = function() {
// Create a Shadow Root
var shadow = this.createShadowRoot();
this.type='button';

// Add an event listener to the image.
this.addEventListener('click', function(e) {
    alert('got a click');
    document.getElementById("ShowButton").value= "Hide Filter";
 });
};

// Register the new element.
var Xbtn =document.registerElement('save-button', {
prototype: SaveBtn,
extends: 'input'
});

并在另一个函数 main.js 中调用它，如下所示：

window.addEventListener("load", onLoad, false);

 function onLoad() {
     var host = document.querySelector('#host');
     var el = new Xbtn();
     host.appendChild(el);
 }

这很好，给了我毯子按钮。

现在我想将要显示的“文本”传递到按钮中，我尝试了以下方法：

在我的 index.html 中：

  <div id="host"></div>

 <input  id="ShowButton" type="button" value="Show Filter"/>

在 main.js 中：

el.value = 'click me';

在 btn.js 中：

this.value = this.getAttribute('text');

但是失败了，按钮还是空的！考虑到其他按钮的值在点击时发生变化

有什么想法吗？

Answer 1

shadow DOM root 只能在它定义的函数范围内访问。您要么需要将 shadow DOM 根对象分配给外部范围变量，要么需要公开一个操作 shadow DOM 的范围内函数。由于您想为多个元素操作 shadow DOM，因此每个实例上的 setter 函数是最佳选择。

你可以完全暴露 shadow DOM：

SaveBtn.createdCallback = function() {
    var shadow = this.createShadowRoot();
    this.myShadow = shadow;
    //...
}

...

el.myShadow.textContent = "click me";

但是，由于 shadow DOM 的一个主要特性是能够隐藏 DOM 组件以防止其他脚本操作，因此您可能希望有一个 setter 函数（例如）验证输入并在内部执行操作：

SaveBtn.createdCallback = function() {
    var shadow = this.createShadowRoot();

    this.setShadowText = function(text) {
        shadow.textContent = text;
    }
    //...
}

...

el.setShadowText("click me");