Understanding Dart 1.11's new appendHTML sanit

I just upgraded to Dart 1.11 and I don't quite unterstand what's happening with .appendHTML(). I have a very large project using dart and .appendHTML() is used quite often. I have been working on this app for over a year now and nothing works anymore. :/

My console just looks like this:

Removing disallowed attribute <DIV style="width: 100%; text-align: right;">
Removing disallowed attribute <DIV style="height: 2em;">
Removing disallowed attribute <DIV style="height: 0.6em;">
Removing disallowed attribute <DIV style="height: 2em;">
Removing disallowed attribute <DIV style="height: 1em;">
Removing disallowed attribute <DIV style="text-align: justify;">
Removing disallowed attribute <DIV style="height: 1em;">
Removing disallowed attribute <DIV style="height: 0.6em;">
Removing disallowed attribute <SPAN style="color: #0d4b63; font-size: 1.6em;">

Most of the time I create elements using new Element() and settings styles using .style.... But sometimes it's just not necessary and appending HTML as a string is just faster and better to read.

What is the reason, that inline styles get removed while being sanitized? I could make my own NodeTreeSanitizer as mentioned here: appendHtml() doesn't append the full HTML - Dart

But that does not seem like a very good solution to me because I guess there is a reason for this to happen.

I have used the Über Simple Webapp template and just added this line of code:

querySelector('#output').appendHtml('<div style="height: 2em; background: red;">Test</div>');

And the style just get's removed:

Removing disallowed attribute <DIV style="height: 2em; background: red;">

But it does look like valid HTML to me. :/

Can someone explain to me what happens here and why and how I can get my project to run again.

Thanks a lot!

EDIT:

Also svg Elements get removed:

Removing disallowed element <g>
Removing disallowed element <text>
Removing disallowed element <image>
Removing disallowed element <polygon>

Creating your custom NodeTreeSanitizer is the way to go. Everywhere where text can be added to the DOM as HTML sanitation is applied. It was just an oversight that sanitation wasn't done in .appenedHTML(). The point is that you declare explicitly which elements can be added to the DOM and which attributes can be added to these elements. This is done to ensure that no malicious HTML or JS can be added to the page by mistake.