Я создаю веб-компонент, используя нативную реализацию, которая в своем HTML-шаблоне имеет ссылки на изображения. Однако эти ссылки работают только в том случае, если они являются абсолютными или относительными к основному документу, что означает, что этот компонент нельзя использовать повторно или переносить. Кроме того, это очень нелогично.

В настоящее время я добавляю атрибут data-url_prefix ко всем элементам, которые должны использовать изображения. Затем при создании теневого корня для моего пользовательского элемента я заменяю {{URL_PREFIX}} значением этого аргумента.

Мое решение кажется очень плохим. Я был бы очень рад, если бы вы посоветовали что-то лучше, спасибо.

Я нашел интересную цитату наhttp://webcomponents.org/polyfills/html-imports/ страница:

ПРИМЕЧАНИЯ ПОЛИФИЛЛА

В импортированных документах атрибуты href и src в HTML и свойства url в файлах CSS относятся к расположению импортированного документа, а не к основному документу.

почему полифилл будет использовать другую логику, чем нативная реализация?

Веб-компоненты В идеале должны инкапсулировать все их зависимости, но если веб-компоненту требуется изображение, он должен знать абсолютный URL-адрес этого изображения, что не позволяет компоненту просто перемещаться в файловой структуре.

Скажем, например, у меня есть следующая структура:

index.htmlCSSmain.cssJSmain.jsweb_componentscool_web_componentcool_web_component.htmlicon.png

Если я изменю это на следующее:

index.htmlCSSmain.cssJSmain.jscool_web_componentcool_web_component.htmlicon.png

Мне нужно было бы изменить указатель на icon.png где-нибудь в этих файлах. Мой вопрос заключается в том, как избежать этого или решить его элегантным способом. Кроме того, почему фактическая нативная реализация конфликтует с полифиллами?