url encoding applied by XSLT in Webkit

[sashafirsov]

<custom-element >
    <template>
        <label value="🍌" src="🍌" href="🍌" data="🍌">🛒</label>
    </template>
</custom-element>

In FF works fine, in Crome produces

<label xmlns="" value="🍌" src="%F0%9F%8D%8C" href="%F0%9F%8D%8C"  data="🍌">🛒</label>

where src and href attributes are url endcoded.

That prevents to use src or href by DCE without decoding them first. <cem-icon src="👀">eyes</cem-icon> produces
%F0%9F%9B%92 eyes

[sashafirsov]

Potential fixes

• try: <xsl:output escape-uri-attributes "no" method="xhtml"/> - only XSLT 2.0, but may be applicable in WebKit?

Solution 1: announce the FF & Chromium differences, do not support the src and href use for non- URL data.

cem-icon should use src only for URLs. The font awesone ID, material icon ID, emoji or unicode symbol have to be passed either in payload as 1st word or by another attribute.

<cem-icon>👀 eyes</cem-icon> - treat 1st WORD as icon
<cem-icon class="far fa-eye">font awesome eye</cem-icon> - class attribute have to be cleared by CEM
<cem-icon class="visibility" >material icon</cem-icon> - it is not a real class name.
The antipattern still in place and translated into <span xmlns="" class="icon material-icons" >visibility</span>

<cem-icon src="data:👀"> eyes</cem-icon> - treat data: URL protocol and still needs decoding.

<cem-icon image="👀"> eyes</cem-icon> - use `image` attributes instead of src: URL protocol and still needs decoding.
other attribute names to be considered: background, content, 

data attribute is URL and can be treated in same way as href.

Solution 2: after transformation decode all src and href occurences

Solution 3: after transformation decode src and href occurences where element is marked by escape-uri-attributes="no" .

<div escape-uri-attributes="no" ... > means to decode all attributes

Following would be confusing as "escape" would mean decoding:

<div escape-uri-attributes="scr href"> means to decode src and href , other attributes can be listed with space separation.

[sashafirsov]

<xsl:output escape-uri-attributes="no" method="xhtml"/> did not work in Crome 131.0.6778.205

[sashafirsov]

For <cem-icon> taking the Solution 1 with <cem-icon image="👀"> approach. Keepin the ticket open for cases where src attribute should be kept ( like module locator ).

[sashafirsov]

data attribute has URL in same fashion as src or href but is not encoded in Chrome. MDN