Estou criando um componente da web usando implementação nativa, que no seu modelo html possui links para imagens. No entanto, esses links funcionam apenas se forem absolutos ou relativos ao documento principal, o que significa que esse componente não é reutilizável ou portátil. Além disso, é muito contra-intuitivo.

Atualmente, adiciono um atributo data-url_prefix a todos os elementos que precisam usar imagens. Em seguida, ao criar uma raiz de sombra para o meu elemento personalizado, substituo um {{URL_PREFIX}} pelo valor desse argumento.

Minha solução parece muito ruim. Eu ficaria muito feliz se você recomendasse algo melhor, obrigado.

Encontrei uma citação interessante nohttp://webcomponents.org/polyfills/html-imports/ página:

NOTAS DE POLYFILL

Nos documentos importados, os atributos href e src em HTML e as propriedades de URL nos arquivos CSS são relativos ao local do documento importado, não ao documento principal.

por que um polifill usaria lógica diferente da implementação nativa?

Idealmente, os componentes da Web devem encapsular todas as suas dependências, mas se um componente da Web exigir uma imagem, ele deverá saber a URL absoluta dessa imagem, o que não permite que o componente seja simplesmente movido pela estrutura do arquivo.

Digamos, por exemplo, eu tenho a seguinte estrutura:

index.htmlcssmain.cssjsmain.jsweb_componentscool_web_componentcool_web_component.htmlicon.png

Se eu mudar para o seguinte:

index.htmlcssmain.cssjsmain.jscool_web_componentcool_web_component.htmlicon.png

Seria necessário alterar o ponteiro para icon.png em algum lugar desses arquivos. Minha pergunta é como evitá-lo ou resolvê-lo de maneira elegante. Além disso, por que a implementação nativa real está em conflito com os polyfills?