Multiple calls to `prepareTemplate` don't cascade as expected.

[Westbrook]

Description

This issue is related to #19 so please close as duplicate if you'd prefer, but I think my use case may be sufficiently separate for me not to immediately add it to the comments there.

When calling the following to create scoped styles for an element using a manually generated styles template:

window.ShadyCSS.prepareTemplate(template1, 'my-element');

And then later calling prepareTemplate again with the same elementName but with a different styles template:

window.ShadyCSS.prepareTemplate(template2, 'my-element');

It appears that the <style/> element that this creates in the head is placed BEFORE the previously created <style/> element, meaning that the styles created earlier in the page lifecycle are after those created later in the cascade. It may be an incorrect assumption, but my expectation is that these rules would cascade as is appended to the page rather than prepended.

Live Demo

https://stackblitz.com/edit/lit-element-portal-2-multiple?file=portal-destination.js

Steps to Reproduce

1. Using a polyfilled browser, of course, I suggest FireFox ESR...
2. Visit the supplied Stackblitz URL
3. When clicking the "Toggle Projection" button, you will append styles that make the newly available "+1" buttons RED.
4. Refresh the demo.
5. When clicking the "Toggle Projection Other" button, you will append styles that make the newly available "+1" buttons BLUE.
6. When subsequently clicking the "Toggle Projection" button, the available buttons will still be blue.
7. In the console the results for document.head.querySelectorAll('style') will be available, you'll be able to see that the styles available at index 2 outline a RED button, and then those at index 3 outline a BLUE button.

Expected Results

I'd expect repeated calls to this API to append styles AFTER those applied in previous calls. The direct solution would be to change the insertion API. However, I'd also welcome a "removal" API with which I could opt-into deleting and/or overwriting previously supplied styles.

Actual Results

Later styles are prepended breaking the cascade.

Browsers Affected

• old stuff
• Chrome
• Firefox ESR
• Edge
• Safari
• IE 11

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!