Estou tentando usar o Polymer em uma extensão do Chrome. O objetivo geral é aproveitar o encapsulamento de estilo para que meus scripts de conteúdo sejam executados isolados do CSS da página que está sendo visitada.

Começando com um elemento personalizado em my-element.html

Estou usando o Vulcanize da seguinte forma:

vulcanize -o build.html my-element.html

Se eu tentar algo assim no meu script de conteúdo:

// content_script.js
$.get(chrome.extension.getURL('build.html'), function(data) {
  var html = document.createElement('div');
  html.innerHTML = data;
  document.body.appendChild(html);

  var custom = document.createElement('my-element');
  document.body.appendChild(custom);
});

O build.html carrega bem, mas o meu elemento não está funcionando. Ele apenas cria uma tag vazia com nenhum dos meus conteúdos DOM de sombra.

Vejo alguns problemas em potencial com o que estou fazendo:

Estou carregando o material de polímero em uma div. Precisa ser carregado diretamente no corpo? Se sim, como isso é feito?Estou assumindo que carregar o build.html com ajax funcionará em primeiro lugar. Esta é uma suposição incorreta?