<div class="my-element"></div>
<form>
<input type="text">
<button type="Submit">search</button>
</form>
let myElement = document.querySelector('.my-element');
let shadow = myElement.attachShadow({
mode: 'closed'
});
shadow.innerHTML = `
<style>
:host {
margin-bottom: 20px;
}
input {
border: blue solid 3px;
}
button {
background-color: rgb(50, 200, 50);
border: none;
padding: 7px 10px;
border-radius: 5px;
color: white;
text-transform: uppercase;
}
</style>
<form>
<input type="text">
<button type="Submit">search</button>
</form>
`;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.