Javascript 如何在web组件中设置标记的内部文本

我正在使用x标签。这是我正在编写的代码。我需要将这些div框的内容设置为customelements属性值。有可能这样做吗？我试图设置它，但我得到错误“未定义的不是一个函数”

var template=xtag.createFragment（函数（）{/*
*/});
xtag.寄存器（'x-navbar'{
生命周期：{
已创建：函数（）{
this.appendChild（template.cloneNode（true））；
this.getElementById（“#box1”）.innerHTML=this.productName；
},
访问者：{
产品名称：{
属性：{}，
get:function（）{
返回此.getAttribute（'productName'）| |“”；
},
设置：函数（值）{
此.xtag.data.header.setAttribute（'productName'，值）；
}
}
}
});
hii

您可以像这样编写属性备份访问器。您不需要手动尝试设置属性。因为它将从更新自身到从get函数返回值

var template = xtag.createFragment(function(){/*
  <div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
  </div>
*/});

xtag.register('x-navbar', {
  lifecycle: {
    created: function() {
      this.appendChild(template.cloneNode(true));
      this.getElementById("#box1").innerHTML = this.productName;
    },
  accessors: {
    productName: {
      attribute: {},
      get: function(){
        return this.getAttribute('productName') || "";
      },
      set: function(value){
        this.xtag.data.header.setAttribute('productName',value);
      }
    }
  }
});

<x-navbar productName="Box 1">hii</x-navbar>

accessors: {
            productName: {
                attribute: {},
                get: function () { return this._productName; },
                set: function (value) { 
                     this._productName = value;
                     // MANUPLATE YOUR HTML IN HERE
                     this.getElementById("#box1").innerHTML = this.productName;
                }
            },
}

---

您可以进一步简化此操作，因为您没有在setter中更改productName：

xtag.register('x-navbar', {
  content: function() {/*
  <div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
  </div>
*/},
  accessors: {
    productName: {
      attribute: {},
      set: function (name) {
        this.querySelector('#box1').textContent = name;
      }
    }
  }
});

---

模板

结构添加在元素内容之后，

hii

检查您的参数。您有未分配的变量。不需要创建的第2行。您需要在productName setter中设置该元素。这似乎容易发生XSS-只需想象一个名为

alert（“邪恶”）

的productName即可。。。

<x-navbar product-name="Testing 123">hii</x-navbar>

hii
Testing 123