Webfiles.js does not work: Safari & Firefox

Question

I am trying to use a custom web component using polyphones by webcomponents.js . I used the <hello-world> element from https://github.com/webcomponents/hello-world-element

Safari and Firefox do not display anything and give me the following errors:

Safari: TypeError: null is not an object (evaluating 'thisDoc.querySelector('template').content')

Firefox: TypeError: thisDoc.querySelector(...) is null

Where is the problem:

I changed hello-world.html . Now it registers the result of the querySelector template:

// Gets content from <template> console.log('thisDoc.querySelector("template")', thisDoc.querySelector('template')); var template = thisDoc.querySelector('template').content;

The console output gives me null . Perhaps the reason is that the rest of the code cannot work. Any ideas?

My system:

Safari: Version 8.0 (10600.1.25.1) Firefox: 31.0 OS: OS X Yosemite 10.10.1 (14B25)

I also posted the question on github at: https://github.com/webcomponents/hello-world-element/issues/7#issuecomment-65321859

Does anyone know how to get policies that work in Safari / Firefox? Thanks!

Answer 1

I found a solution to the problem. Now you can use web components with native APIs in Chrome and with policies on Firefox and Safari.

Just update this line:

var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;

to

var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;

Why does it work?

_currentScript comes from polypoluses and allows you to get the correct ownerDocument for the <template> request. If polyfills does not exist, the code above uses currentScript instead, which is available in Chrome.

I already made a Pull request on github.