Rendering

[sbadya]

Hello! Is it valid to render Html element ?

this.child = document.createElement('web-component'); this.html`

        <div class="aras-accordion__content"></div>
        <div class="aras-accordion__content">${this.child}</div>
    `;

[MikeVaz]

What is your context this? Is it some sort of an object but not a HTMLElement instance?

The problem is that you trying to use HTMLElement object as String inside a template literal. Template literals work with simple types that can be converted to a string like var myString = ` some text ${myVar}`;.

Instead you should be appending it using something like

var myNewElement = document.createElement('my-web-component');
myParentElement.appendChild(myNewElement);

or

myParentElement.innerHTML('<div>...some html code here... <my-web-component></my-web-component>.... more html here ...</div>');

[sbadya]

I mean that when some element is created via createElement method (for example var el = document.createElement('div')), can i render as html${el} or should be use html <div></div>?!

[MikeVaz]

You can't do that.

HTML is a declarative way to build the DOM. You final goal should be to add elements to the DOM. Basically you have two options. Use Javascript and directly manipulate DOM or use HTML string.

To understand the problem you running into try this code in the browser's console

var el = document.createElement('div');
`${el}`
// you'd get something like "[object HTMLDivElement]"

Because your HTMLElement object can't be converted to a string. If you still want to use HTML to add your elements to the DOM you need to use tags representing your new element <my-web-component></my-web-component>

If you don't know your element's tag name you can get it from the tagName property.

var el = document.createElement('div');
`<${el.tagName}></${el.tagName}>`

[WebReflection]

@MikeVaz I think @sbadya is using hyperHTML and the question should be posted probably there, because with hyperHTML he can do that, but just trying would've shown already he could've done it.

hyperHTML is a DOM facade, not an innerHTML like operation, so it is possible to put a node in a template literal and it will be appended there (but not cloned).

However, you don't need to mix up the two syntaxes, you can just html<my-component /> and it works.

[sbadya]

It works nice, but in dom there is a string <!--- hyper -some-number. What is it?

[WebReflection]

What is it?

An implementation detail you shouldn't care about. The TL;DR story is that you need to anchor a range of nodes in a certain position of the DOM and comments, completely immune to redraws, repaints, layout calculations, are used as "pin" for hyperHTML interpolation holes.

But again, nothing you should care about, neither your users, your SEO, your browsers, or your servers.

[WebReflection]

P.S. if you want to better understand how it works: https://gist.github.com/WebReflection/d3aad260ac5007344a0731e797c8b1a4

P.S.2 this has nothing to do with document-register-element polyfill though ...