Allow users to use embedded HTML tags in custom blocks I'm using CKEditor in Drupal 8 and the client wants to write HTML that contains embedded tags like so

&lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
  &lt;div class="menu-toggle-icon"&gt;&lt;/div&gt;
&lt;/button&gt;


Unfortunately, Drupal ends up mangling the code to something like this

&lt;button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"&gt;&lt;/button&gt;

&lt;div class="menu-toggle-icon"&gt;&amp;nbsp;&lt;/div&gt;
&lt;button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"&gt;&lt;/button&gt;


I think this is in an attempt to prevent XSS but I'm not totally sure.

Should I be able to allow the user to embed tags? If so, how could I go about doing this?
The W3C specs (https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element) show that a button allows phrasing content (https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content), e.g. a &lt;span&gt; to be placed inside a &lt;button&gt;, but not a &lt;div&gt;, so your WYSIWYG editor is correctly rearranging the elements.

Perhaps you could rework your code to allow for a &lt;span&gt; to be used inside the &lt;button&gt; and style that instead.