Stylesheets in template elements are listed multiple times in the style editor tab
Categories
(DevTools :: Style Editor, defect)
Tracking
(Not tracked)
People
(Reporter: euro20179, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0
Steps to reproduce:
Create a template element, then define a basic custom element using customElements.define, add an instance of that element to the page using document.createElement and document.body.append.
minimal example:
index.html:
<!DOCTYPE html>
<body>
<template id="template">
<style>
@import "minimal.css";
</style>
<div class="root">
Hi
</div>
</template>
</body>
<script>
customElements.define("custom-element", class extends HTMLElement {
constructor() {
super()
const template = document.getElementById("template").content
const sr = this.attachShadow({mode: "open"})
sr.appendChild(template.cloneNode(true))
}
})
for(let i = 0; i < 10; i++) {
let el = document.createElement("custom-element")
document.body.append(el)
}
</script>
minimal.css:
.root {
color: red;
}
Actual results:
Each time an instance of custom-element is added to the page, it creates an instance of its stylesheet, and any imported stylesheets in the style editor tab.
In this case, since I created 10 instances, there are 10 duplicate "minimal.css", and "<inline stylesheet>" items in the style editor tab.
Expected results:
There should only be 1 instance of the stylesheet in the tab, especially for @import stylesheets, since it will be the same across all instances of the template.
|
||
Comment 1•1 month ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Updated•1 month ago
|
|
|
||
Comment 2•1 month ago
|
||
This is a bit tricky fwiw, because technically you can edit each individually with js and what not...
|
||
Comment 3•24 days ago
|
||
Thanks for filing, we have Bug 1195461 already filed for this issue.
Description
•