如何在 Web 组件中设置标签的内部文本

How to set inner text of tag in web component

本文关键字：标签 内部 文本 设置 Web 组件      更新时间：2023-09-26

我正在使用x标签。这是我正在处理的代码。我需要用自定义元素属性值的值设置这些div 框的内容。可以这样做吗？我尝试设置它，但出现错误"未定义不是函数"。

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>

您可以像这样编写支持访问器的属性。您无需手动尝试设置属性。因为它会从 get 函数更新自身以返回值。

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;
      }
    }
  }
});

你会像这样使用：

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

请注意，属性名称必须是 productName 、 product-name 的破折号化版本。 这将呈现为：

hii
Testing 123

模板<div>结构添加到元素的内容之后，hii .

相关文章：