自定义HTML元素不适用于iOS Safari

Question

我已经定义了一个这样的自定义元素：

class ColorTagSmall extends HTMLElement {
    constructor() {
        super();
        if (this.hasAttribute('val')) {
            var col = this.getAttribute('val');
            var str = this.innerHTML;
            this.innerHTML = '<span class="color-small" style="color:#' + col + '">' + str + "</span>";
        }
    }
}
customElements.define('c-s', ColorTagSmall);

在li这样的元素中使用哪个：

<li><c-s val=FFFFFF>TEXT</c-s></li>

color-small类的CSS：

.color-small {
    font-weight: bold;
}

该元素在桌面上运行良好，但在iOS Safari上，该元素被纯文本替换（没有格式，就像标签不在那里一样）。

我正在使用JQuery，因此脚本编写如下：

$(function () {/* */});

我尝试将自定义元素定义同时放入和放出jquery功能块，但没有成功。

根据the compatibility tables，iOS Safari仅支持自主自定义元素，我认为这涵盖了我的用例。

如何使自定义元素在iOS Safari中工作？