Define own custom HTML element
Here I am demonstrating how to define your own custom HTML element or control and how to use it.
Define is as <my-test-element-one> </my-test-element-one>
and then use my JavaScript. The complete code it below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<my-test-element-one>
</my-test-element-one>
<script>
class my_test_element_one extends HTMLElement{
connectedCallback(){
this.innerHTML=` <div class="myclass" style=" width:600px;height:500px; background-color:green">
<img src="https://images.pexels.com/photos/267415/pexels-photo-267415.jpeg?auto=compress&cs=tinysrgb&w=300" />
</div>`
}
}
customElements.define('my-test-element-one', my_test_element_one);
</script>
</body>
</html>
Posts
