I have
main.js and index.html below
class CustomTagA extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const wrapper = document.createElement('h1');
wrapper.setAttribute('class', 'wrapper');
wrapper.textContent = 'Custom Tag A';
shadow.appendChild(wrapper);
}
}
class CustomTagB extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const wrapper = document.createElement('a');
wrapper.setAttribute('class', 'wrapper');
wrapper.textContent = 'Custom Tag B';
shadow.appendChild(wrapper);
}
}
customElements.define('cutomtag-a', CustomTagA);
customElements.define('cutomtag-b', CustomTagB);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<cutomtag-a></cutomtag-a>
<cutomtag-b></cutomtag-b>
<script src="./main.js"></script>
</body>
</html>Upon inspecting the HTML in my browser, I noticed a couple custom elements. This has sparked some questions regarding Shadow Element:
- Where is the default CSS of the Shadow Host Element?
- Why does cutomtag-a break the line when displayed inline? Is it due to the use of an h1 tag? What are their working principles and where can I find related documentation?