Localize element not rendering after umb-toggle

[clausjensen]

Umbraco version

Latest v8/dev.

Reproduction

Well... this is a bit funky, but do this:

• Edit publishdescendants.html (it's in views/content/overlays).
• Locate the first umb-toggle element in there and place this on the line directly above it:
  <localize key="content_includeUnpublished"></localize>
• Open a content node, select to publish descendants and verify that you see this text now showing up in the dialog.
• Now go back to the file and move the localize tag below the umb-toggle directive.
• Open the same dialog ... and verify that the localized text no longer renders.

I haven't tested if this applies to other directives as well ... I just noticed it with the toggle.

Bug summary

Localized text/tag seems to not render when put in after a umb-toggle element. It works fine if placed before umb-toggle.

[clausjensen]

Here's a challenge for you @kjac 😄 Have fun!

(I've got no clue what is going on here!!!)

[bjarnef]

@clausjensen this is because of the <umb-toggle> is added as a void element (self-closing element), which angular directives/components can't be as they are custom HTML elements.

It's a similar issue as in #8478

There is a great explanation of it here: https://stackoverflow.com/a/25012451/1693918

I have also added a comment here: #8601 (comment)

We should ensure all <umb-toggle> use an end-closing </umb-toggle>.

I have already updated this for <umb-checkbox> and <umb-radiobutton>, but should also be done for .
#8547

[clausjensen]

I had no idea about the thing with closing elements .. Great find 😄 👍 and thanks!!