ShadowDOMの外から内部の要素を取得する

shadowRootでshadowRootが取れるのでそこから辿れる。

var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
  var shadowRoot = this.createShadowRoot(); 
  shadowRoot.innerHTML = '<span class="foo">text</span>';
};

document.registerElement('x-element', { prototype: proto });

var el = document.createElement('x-element');

// これで取れる
console.log(el.shadowRoot.querySelector('.foo').textContent); //=> text