43 lines
1.2 KiB
HTML
43 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shadow DOM Example</title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<script>
|
|
// Define the custom web component
|
|
class APP extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
// Attach a shadow root to the custom element
|
|
const shadowRoot = this.attachShadow({ mode: 'open' });
|
|
|
|
// Add custom markup and styles to the shadow root
|
|
shadowRoot.innerHTML = `
|
|
<style>
|
|
.shadow-content {
|
|
color: white;
|
|
background-color: black;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|
|
<div class="shadow-content">
|
|
This is content inside the shadow root of a web component.
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Register the custom element
|
|
customElements.define('gale-app', APP);
|
|
</script>
|
|
|
|
<gale-app></gale-app>
|
|
</body>
|
|
</html> |