Captura 22: Carregar script se o elemento que depende do script existir

Meu objetivo é carregar o javascript no diretório<head> somente se um determinado elemento existir no<body>.

No entanto, estou com um problema: estou carregando um componente da Web, que é apenas um<script> hospedado em outro lugar e é apresentado como:

<script src="https://someurl.com/some-web-component.min.js"></script>

Esse arquivo de componente da Web é enorme, então não quero puxá-loa menos que é inserido no corpo pelo nosso Sistema de Gerenciamento de Conteúdo (CMS).

As restrições em que estou trabalhando são:

• O<head> é compartilhado entre páginas, então eu preciso de lógica condicional

• Não tenho controle sobre o<body> inserido pelo CMS, que conterá potencialmente o<my-web-component> etiqueta, rótulo, palavra-chave

• PRECISO do script para carregar o componente da web, portanto não posso usar o $ (documento) do jQuery. Já, pelo menos acho que não posso - um erro será gerado porque o navegador não saberá que o elemento existe

Esse plunker mostra parcialmente meu problema, menos toda a complexidade dos componentes da web:

https://plnkr.co/edit/GGif2RNHX1iLAvSk1nUw?utm_source=next&utm_medium=banner&utm_campaign=next&p=preview

Alguma maneira de contornar isso?

questionAnswers(1)

yourAnswerToTheQuestion