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

哈桑·优素福（Hasan A Yousef）

我想实现的相同的代码本使用JavaScript，所以写了下面的代码为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');

但是失败了，按钮仍然是空的！考虑到单击后其他按钮的值已更改

任何想法？

炸药

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

您可以完全公开影子DOM：

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

...

el.myShadow.textContent = "click me";

但是，由于影子DOM的一个主要功能是能够隐藏DOM组件，使其不受其他脚本的操纵，因此，您可能希望拥有一个setter函数，例如，该函数可以验证输入并在内部执行操纵：

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

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

...

el.setShadowText("click me");

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。