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.

· · Web · 2 · 0 · 4

@heydon if you get a service worker on the go too, each subsequent request will be local anyway 👍

@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 ;-)

Sign in to participate in the conversation

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!