class CustomComponent extends HTMLElement {
constructor() {
super()
var shadowRoot = this.attachShadow({
mode: 'open'
})
this.width = this.getAttribute('width') || '100'
this.height = this.getAttribute('height') || '100'
this.radius = this.getAttribute('radius') || '10'
this.backgroundColor = this.getAttribute('backgroundColor') || '#c74747'
const box = this.createElement()
shadowRoot.appendChild(box)
}
createElement() {
const box = document.createElement('div')
box.style.cssText = `
width: ${this.width}px;
height: ${this.height}px;
border-radius: ${this.radius}px;
background-color: ${this.backgroundColor};
`
return box
}
}
window.customElements.define('lgk-custom', CustomComponent)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Component</title>
</head>
<body>
<lgk-custom></lgk-custom>
<lgk-custom width="120" height="120" backgroupColor="#27e3ff"></lgk-custom>
<lgk-custom width="150" height="150" backgroundColor="#f8c836" radius="50"></lgk-custom>
<script src="./index.js"></script>
</body>
</html>