webcomponents.js polyfills not working: Safari & Firefox

Question

I'm trying to use a custom Web Component using the webcomponents.js polyfills. I've been using the <hello-world> element from https://github.com/webcomponents/hello-world-element

Safari and Firefox won't 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 the problem is:

I modified hello-world.html. It now logs the result of the template querySelector:

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

The console output gives me null. That's possibly why 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 an issue at github at: https://github.com/webcomponents/hello-world-element/issues/7#issuecomment-65321859

Does anybody know a solution to get the polyfills working in Safari/Firefox? Thank you!

Answer 1

I found the solution for the issue. You can now use Web Components with the native APIs on Chrome and with the polyfills 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 this work?

The _currentScript comes from the polyfills and allows you to get the correct ownerDocument to query the <template> from. If polyfills do not exist, the above code is using currentScript instead, which is available on Chrome.

I already made a Pull request on the github.