webcomponents / webcomponents/polyfills

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

Open
#156 2 comments 0 reactions 0 assignees View on GitHub
Package: shadycss wontfix
Dominant language
HTML
Stars
1.2k
Forks
168
PR merge metrics
No merged PRs in 30d

Description

### 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 `` 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
<!-- Check all that apply -->
- [x] old stuff
- [ ] Chrome
- [x] Firefox ESR
- [X] Edge
- [ ] Safari
- [X] IE 11

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.