I've been looking around the mdn documents about web component,I followed the link and i arrived to documents about template below the link is what i was looking.
According to the documents
it says if i don't append node by using cloneNode? template's inner style will does not work. But i try both just append and append with cloneNode but both test was same.... So i have a question that am i miss understanding or spec changes to support both? i test both browser in chrome , safari
code with out cloneNode
<template id="my-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>
<p>My paragraph</p>
</template>
<my-paragraph></my-paragraph>
<script>
customElements.define('my-paragraph',
class extends HTMLElement {
constructor() {
super();
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
const shadowRoot = this.attachShadow({
mode: 'open'
})
var style = document.createElement('style');
style.textContent = `
p{
font-size: 30px;
color:'black';
}`;
shadowRoot.appendChild(style)
console.log(template)
shadowRoot.appendChild(templateContent);
}
}
);
</script>code using cloneNode
<template id="my-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>
<p>My paragraph</p>
</template>
<my-paragraph></my-paragraph>
<script>
customElements.define('my-paragraph',
class extends HTMLElement {
constructor() {
super();
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
const shadowRoot = this.attachShadow({
mode: 'open'
})
var style = document.createElement('style');
style.textContent = `
p{
font-size: 30px;
color:'black';
}`;
shadowRoot.appendChild(style)
console.log(template)
shadowRoot.appendChild(templateContent.cloneNode(true));
}
}
);
</script>https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots