Examples not working under Edge / 15

[robcole]

Using a cross-browser testing app to test a production app, however, this is also replicable in our local examples. Attaching screenshots of one in Chrome, other in Edge / 15 (similar issues exist in Edge / 14 and IE / 11).

Happy to debug more if someone can give me an area to look; it's looking like support for both IE and Edge is lacking.

My hunch is that this is due to the polyfills, but I haven't tracked down a way to actually gain any traction fixing it yet.

---

Example: http://snuggsi.herokuapp.com/examples/hello-world

Also tested: JS fiddle of example, http://jsfiddle.net/snuggs/3zwkj9wg/?utm_source=website&utm_medium=embed&utm_campaign=3zwkj9wg

Chrome

Edge / 15

---

Console Errors (Edge)

[snuggs]

@robcole seems like this is the "gold standard" at least 2 years ago. https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/

[snuggs]

@robcole https://github.com/devpunks/snuggsi/issues/127

[robcole]

@snuggs @brandondees - I was able to get the page load working with a new Polyfill (link) but there's a new issue with this.context not being defined. Tried accessing it in an onconnect function with no luck - small snippet of code + screenshot of error posted; sorry for screenshot, but can't copy/paste from Browserstack.

debugger call inserted so I can log what this and this.context look like before the error is triggered (on next line).

const supporterWallElement = class extends HTMLElement {
  initialize () {
    this.context.currentPage = 1; // pagination
    this.context.supporters = [];

    this.context.wallUrl = document
      .querySelector(`supporter-wall`)
      .dataset
      .wallUrl;
  }

  onconnect () {
    const template = Template(`supportercard`);
    debugger;
    template.bind(this.context.supporters);
    this.fetchSupporters();
  }
...

[brandondees]

I don't think this.context has any magic to it, just a convention pattern you can follow. basically, set it to an empty object yourself. right, @snuggs ?

[robcole]

@brandondees What I mean by this is that this.context isn't being initialized in Edge the way it is in Chrome in the Component class, i.e. https://github.com/devpunks/snuggsi/blob/master/dist/snuggsi.js#L341 doesn't appear to be triggered.

[snuggs]

AHHH I See interesting @robcole that Polyfill is part of the solution we are coming up with. Thanks man!!!! @robcole /cc @brandondees

[snuggs]

Promising!!! Feelin' real good about this 💪 @robcole @brandondees @albertoponti @cristhiandick @angelocordon @codeSnorter

[snuggs]

Internet Explorer 11

Firefox 54

[snuggs]

@brandondees @robcole @tmornini @kurtcagle I have been through (I.E.) Hell and back. Was an extremely dark place the past few days in IE land. (Couldn't even log on Slack let alone messenger due to resource hogging of Parallels). That said... Polyfill complete (from my testing). Big salute to @robcole for coming through with that document.registerElement polyfill as well. It filled in the missing pieces that was giving webcomponentsjs polyfill problems in IE. Also integrating into snuggsi.es so we can remove the polyfill noise from the README (confusing as fuck! and @cristhiandick hates it) . Which means we have custom elements in IE (back to 8 I believe) AND Firefox. That said, now getting snuggsi upgrades working which we have full control over. Still down by 1 in the football game. As soon as we get those undefined clear that's the 2 point conversion to win the Super Bowl.

/cc @albertoponti @cristhiandick 🏈 💯 🎉 :goal_net:

Polyfill Implementation

HTMLElement

• https://github.com/devpunks/snuggsi/blob/master/elements/html-element.es

CustomElementRegistry

• https://github.com/devpunks/snuggsi/blob/master/elements/custom-elements-registry.es

Screen Captures

Safari

Firefox

Chrome

Internet Explorer 11

[robcole]

Thanks for the updates @snuggs - LMK when you're at a point where you'd like some real-world testers and I'd be happy to test against our current code! 🤞

[snuggs]

Sheds light on solution. From the spec maintainers. And their frustration with polyfill authors https://github.com/whatwg/html/issues/1704 Particularly https://github.com/whatwg/html/issues/1704#issuecomment-241881091

[snuggs]

@robcole @brandondees @albertoponti @cristhiandick.

Only 1 bug left in FF and all clear. I'd say 98% complete cross browser.

[snuggs]

... Sans webcomponentsjs pollyfill

@brandondees and it's getting worse... Good thing we got off the boat. github.com/webcomponents/webcomponentsjs/issues/830#issuecomment-328973451

[snuggs]

@robcole @brandondees @albertoponti @cristhiandick iOS & (as @robcole calls it) IE (Edge) #Touchdown 🏈 with 1% to go. ;-)