Atualmente, estou tentando implementar um repetidorWebComponent permitir à empresa criar facilmente front-end sem depender de nenhumframework (decisão tomada pela arquitetura).

Aqui está o meu código atual:

<ul>
    <company-repeat datas='[{"name": "NameValeur", "value": "valeurId"}, {"name": "NameObject", "value": "objectId"}]'>
        <li>${name}</option>
    </company-repeat>
</ul>

<select name="" id="">
    <company-repeat datas='[{"name": "NameValeur", "value": "valeurId"}, {"name": "NameObject", "value": "objectId"}]'>
        <option value="${value}">${name}</option>
    </company-repeat>
</select>

olist está funcionando corretamente, pois parece não ter nenhuma limitação sobre qual tag é permitida, mas o select não está permitindo que ocustomElement company-repeat nele e por extensão, quebre o recurso e apenas exiba<option value="${value}">${name}</option>

Aqui está o código fonte do meuWebComponent

class CompanyRepeater extends HTMLElement {
    connectedCallback() {
        this.render();
    }

    render() {
        let datas = JSON.parse(this.getAttribute('datas'));
        let elementType = this.getAttribute('element');
        this.template = this.innerHTML;
        console.log(elementType);

        let htmlContent = elementType !== null ? `<${elementType.toLowerCase()}>` : '';

        datas.forEach(elem => {
            htmlContent += this.interpolate(this.template, elem)}
        );

        htmlContent += elementType !== null ? `</${elementType.toLowerCase()}>` : '';

        this.innerHTML = htmlContent;
    }

    interpolate(template, obj) {
        for(var key in obj) {
            const pattern = "${" + key + "}";

            if(template.indexOf(pattern) > -1) {
                template = template.replace(pattern, obj[key]);
                delete(obj[key]);
            }
        };

        return template;
    }
}

customElements.define('company-repeat', CompanyRepeater);

Minha pergunta agora é: como posso fazê-lo funcionar, independentemente do elemento pai? Eu adicionei uma propriedadeelement para o meu repetidor, mas não está permitindo que eu declare mais atributo, e ele não funcionará dentro de uma tabela.

Essa é a única coisa que me impede de mudar tudo para o WebComponent.