Document state should determine whether the CSS has been added

[nsaunders]

Svelte components add their stylesheets to document.head once per component type. Whether the stylesheet has already been added is currently determined by a private variable added_css inside the component module. While in most cases, this flag should be accurate, this is not always the case in the REPL (see svelte.technology#93) and possibly other environments as well. I believe it is more correct to attach some kind of identifier to the style element and then query the document.head element to determine whether it already exists. In my opinion, the accuracy of this approach is well worth the performance hit.

[Conduitry]

I think this seems like a reasonable enough change. I've pushed a branch but haven't opened a PR yet.

[Rich-Harris]

Agree with this in principle. Would using an id instead of an attribute selector minimise the performance hit? I could be wrong but IIRC browsers are better at querySelector('#thing') or getElementById('thing') than querySelector('[thing]')

[nsaunders]

@Rich-Harris https://jsperf.com/getelementbyid-vs-queryselector

[Rich-Harris]

Thanks. I suppose the real comparison is this one: https://jsperf.com/getelementbyid-vs-qs-id-vs-qs-attr

Seems conclusive!

[nsaunders]

Good find. Thanks guys for your consideration! I am looking forward to a perfect REPL experience once this is resolved. :-)