Remove {append, buildFragment, enterDocument} usages of metal-dom WIP

[diegonvs]

THIS IS A WIP

append

Link to metal-dom impl: https://github.com/metal/metal.js/blob/466812085dd29e37c90b835c64cb49555d76a294/packages/metal-dom/src/domNamed.js#L179

(I noticed the JSDoc is wrong, (this is all old Diego's fault 😂)

Basically this function appends a text|child node or other nodes to a parent node. It can be easily replaced by native ParentNode.append function.

buildFragment

Link to metal-dom impl: https://github.com/metal/metal.js/blob/466812085dd29e37c90b835c64cb49555d76a294/packages/metal-dom/src/domNamed.js#L199

I researched about which is the best option for replacing buildFragment(a function that receives a string and returns a HTMLFragment and I found a thread that explains that

• document.createRange().createContextualFragment(myStr) is a bit more widely supported (IE11 just got it, Safari, Chrome and FF have had it for a while).

• Custom elements within the HTML will be upgraded immediately with the range, but only when cloned into the real doc with template. The template approach is a bit more ‘inert’, which may be desirable.

So, I choose this option than just creating a fragment and then setting the content using myFragment.innerHTML = myStr.

However, this function doesn't work fine with some tags like td, see:

it removes the td element and just pass the text to the DOM

Can I proceed with this function or find other way more reliable?

Test case

1. Type Liferay.Util.openToast({message: 'Amanhã não existe, ainda'}); on Chrome console with the DXP opened
2. Try running the same command and observe the toasts stacking

When using document.createRange() function We have an issue already mentioned by our dear @wincent at https://github.com/wincent/liferay-portal/pull/208#issuecomment-616502610

I tried to fix using this suggestion and

    TypeError: document.createRange is not a function

Still being appearing for me. I tried to remove the “global” but still broken. I’ll take a look tomorrow(30 Oct)

enterDocument

Link to metal-dom impl: https://github.com/metal/metal.js/blob/466812085dd29e37c90b835c64cb49555d76a294/packages/metal-dom/src/domNamed.js#L324

This function append the given nove(if defined) to document.body.

It can be easily replaced by native ParentNode.append function, setting as a target document.body.

[liferay-continuous-integration]

To conserve resources, the PR Tester does not automatically run for every pull.

If your code changes were already tested in another pull, reference that pull in this pull so the test results can be analyzed.

If your pull was never tested, comment "ci:test" to run the PR Tester for this pull.

[wincent]

Can I proceed with this function or find other way more reliable?

I think createContextualFragment() is the right tool for the job, but the problem you're seeing is that if you pass it a string containing a node that requires a certain parent (eg. <td>, which can only appear as a child of a <tr>), that's invalid HTML so the browser "fixes" it for you.

This Stack Overflow question shows two ways of dealing with it: manual element creation and use of <template>, so I think we could try the basic way (like you are here) and if it doesn't work fall back to the <template> approach (which will work on all browsers that we support).

But is this something that is going to come up in practice? As in, if we know the places you're making these changes will never pass in anything "special" like <td> then we don't have to do anything.

[bryceosterhaus]

Sent an update at #468