My icon component uses fetch, because I don't like the limitations of <use>. This way, I can use the same SVG resources with my component, or directly with img[src]. DRY.
@hankchizljaw Good point!
@hankchizljaw Well, turns out this doesn't work so great because of content security policy errors RE relative URLs. Got it working on Github by hard coding the URL...
@hankchizljaw Ignore that. I just needed a ./ URL. They don't tell you that :-/
@heydon ah yeh that’s a bugger. I totally didn’t get service workers until I read Jeremy Keith’s book to be honest. All the other resources are very “high tech”.
@hankchizljaw Wasn't even a service workers issue. Unexpected Other FuckeryTM.
@heydon I think you could directly do: this.attachShadow({ mode: 'open' }); followed by this.shadowRoot.innerHTML = '<slot></slot>';. You don't need this template cloning gym, do you?
@cedeber Hmm. What about the CSS? I'd just use a stylesheet, but I am interpolating from one of the attributes...
@heydon You can have it like what you've done, with the <slot>. The literal string is totally fine.
@cedeber Huh. You're right. I guess the only advantage of <template> is that the contents are inert until invocation/cloning?
@heydon Yes, it stays disconnected from the page's DOM. But you inject it directly after without update so it looks to me like a step too much. And it will save a bit of memory too as you won't have 2 times the same DOM part ;-)
@heydon if you get a service worker on the go too, each subsequent request will be local anyway 👍