locked
jquery and custom tags RRS feed

  • Question

  • User632751675 posted

    hi,

    I would like to know how to work with custom tags.  I am working with some html that uses them quite a lot.  The information I'm looking for is inside custom tags like <abc-panel panel2>.   How do you work with custom tags? 

    thanks!

    Monday, May 17, 2021 11:08 PM

Answers

  • User-1330468790 posted

    Hi maggiemays,

     

    I think you might want to look at this article:

    https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

     

    To short, the custom tags can be used as below.

    • Registering new elements:
      var XFoo = document.registerElement('x-foo');
      document.body.appendChild(new XFoo());
      Note that a) the first argument to document.registerElement() is the element's tag name. The name must contain a dash (-). b) the second argument is an (optional) object describing the element's prototype. This is the place to add custom functionality (e.g. public properties and methods) to your elements. 
      var XFoo = document.registerElement('x-foo', {
        prototype: Object.create(HTMLElement.prototype)
      });
    • Instantiating elements:   
      Declare them: <x-foo></x-foo>
      Create DOM in JS:
      var xFoo = document.createElement('x-foo');
      xFoo.addEventListener('click', function(e) {
        alert('Thanks!');
      });
      Use the new operator:
      var xFoo = new XFoo();
      document.body.appendChild(xFoo);

    Above things are just some fundamental explanations about how to create and instantiate custom tags. You will need to explore more in the article about how to add JS properties and methods, add markup and style custom elements.

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 18, 2021 4:49 AM

All replies

  • User-1330468790 posted

    Hi maggiemays,

     

    I think you might want to look at this article:

    https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

     

    To short, the custom tags can be used as below.

    • Registering new elements:
      var XFoo = document.registerElement('x-foo');
      document.body.appendChild(new XFoo());
      Note that a) the first argument to document.registerElement() is the element's tag name. The name must contain a dash (-). b) the second argument is an (optional) object describing the element's prototype. This is the place to add custom functionality (e.g. public properties and methods) to your elements. 
      var XFoo = document.registerElement('x-foo', {
        prototype: Object.create(HTMLElement.prototype)
      });
    • Instantiating elements:   
      Declare them: <x-foo></x-foo>
      Create DOM in JS:
      var xFoo = document.createElement('x-foo');
      xFoo.addEventListener('click', function(e) {
        alert('Thanks!');
      });
      Use the new operator:
      var xFoo = new XFoo();
      document.body.appendChild(xFoo);

    Above things are just some fundamental explanations about how to create and instantiate custom tags. You will need to explore more in the article about how to add JS properties and methods, add markup and style custom elements.

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 18, 2021 4:49 AM
  • User632751675 posted

    thanks so much for this information, it's really helpful. 

    Tuesday, May 18, 2021 3:40 PM