Follow

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.

@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
Mastodon

Follow friends and discover new ones. Publish anything you want: links, pictures, text, video. This server is run by the main developers of the Mastodon project. Everyone is welcome as long as you follow our code of conduct!