How to set inner text of tag in web component

Question

I am making use of the x-tags. Here is the code that I am working on. I need to set the content of these div boxes with value of custom elements attribute value. Is it possible to do this? I tried setting it but I got error "undefined is not a function".

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>

Check your parens. You have variables that are not assigned. Line 2 of created is not needed. You need to set that element in the productName setter. — Arron S, Nov 25 '14 at 15:03

Bahtiyar Özdere · Answer 1 · 2015-11-28T17:56:22.113

1

You can write the attribute backing accessors like this. You dont need to try setup attributes manually. Since it will update itself from to returning value from get function.

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

edited Nov 28 '15 at 17:56

answered Nov 28 '15 at 17:48

Bahtiyar Özdere

1,818
17
21

1

This seems prone to XSS - just imagine a productname of ` – domenukk Jun 24 '20 at 23:22

jpec · Answer 2 · 2016-02-19T00:04:17.190

You can simplify this even further, because you are not changing the productName in the setter:

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

Which you would use like this:

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

Note that the attribute name must be the dasherized version of productName, product-name. This would be rendered as:

hii
Testing 123

The template <div> structure is added after the element's content, hii.

How to set inner text of tag in web component

2 Answers2