Why are my classes being removed when using popupTemplate?

JackFairfield

In the latest version of the js api (4.14), when I create a simple popup template like this:

...

popupTemplate:{
   title: 'test',
   content: '<div class="customClass">Green</div>'
}

...

Why is my "customClass" being removed in the resulting popup html?

Here is a simple example in JS Bin:     JS Bin - Collaborative JavaScript Debugging 

In this example, I would have expected the "Green" text in the body of the popup to appear green.

This issue doesn't seem to happen when reverting back to the 4.13 version of the api.

MattDriscoll

Hello,

In 4.14, we are using a HTML sanitizer (https://github.com/Esri/arcgis-html-sanitizer) which removes some HTML for security purposes. We may be able to do something for this in 4.15.

As an alternative workaround to a HTML string, you can do the following to modify a dom node directly.

<SPAN class="keyword token">var</SPAN> template <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
  content<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> div <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    div<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">=</SPAN> <SPAN class="string token">"myClass"</SPAN><SPAN class="punctuation token">;</SPAN>
    div<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<span>My custom content!</span>"</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">return</SPAN> div<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>