?? ? ???? ????? ???? ?? ???? ?? ?? ??? ??????? ???? ? ??? ??? ?????. ? ??????? ???? ???? ?? ???? ??, ?? ??? ?????(UI)? ????? ??? ? ?? ??? ?? ????. ??? ? ?? ??? ???? ????.
? ?? ??? ???? ???? ?????? ?????? ???? ??? ? ???????? ??? ? ?? ??? ???? ???? UI ??? ??? ? ????. ? ?????? ? ?? ??? ????, ??? ?????, ??? ? ? ??? ??? ?? ? ??? ???????.
?, ??? ?????!
? ????? ??????
? ?? ??? ???? ??? ??? ???? ??? ??? ??? ?? HTML ??? ?? ? ?? ? ??? API ?????. ??? ??? ????? ????? ???? ???? ?? ?? ?? ??? ????? ??? ??? ?? ????.
????? ? ?? ??? ? ?? ?? ??? ???? ?????.
??? ?? ??: ?? ?? ???? HTML ?? ? ?? ??? ??? ? ????.
Shadow DOM: ?? ???? ???? ????? ?? ??? ?? ??? ??? ??? ???? ?? ???? ??? ?? ??? ?? ? ??? ???.
HTML ???: ???? ??? ? DOM? ???? ? ?? ??? ??? HTML ???? ???? ?? ????? ??? ??? ??? UI? ??? ? ?? ??? ?????.
??? ??? ?? ???? ??????? ?? ???? ??? ?? ??????? ????? ??? ??? ?? ??? ?? ? ????.
? ?? ??? ???? ??? ??????
? ?? ???? ????? ???? ??? ?? ?? ?? ??? ????.
????: ?? ??? ? ? ???? ???? ??? ? ?? ?? ??? ?????.
???: Shadow DOM? ???? ?? ?? ??? ???? ??? ??????? ??? ??? ???? ??? ? ? ????.
?????? ???? ??: ? ?? ??? ?? ??????? ????? ?? ?????. React, Angular, Vue ?? ?? HTML? ???? ? ?? ??? ??? ??? ? ????.
?? ???: ? ?? ??? ????, ?, ?? ?? ?? ??? ? ?? ??? ???? ?????.
?? ? ?? ??? ??? ??
?? ? ?? ??? ???? ????? ? ?? ??? ??? ??? ???????. ?? JavaScript? ???? ??? ??? ?? ?? ?? ??? ???? ??? ???????.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Button Component</title>
</head>
<body>
<my-button>Click Me!</my-button>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
// Attach Shadow DOM
this.attachShadow({ mode: 'open' });
// Create button element
const button = document.createElement('button');
button.textContent = this.textContent;
// Add styles
const style = document.createElement('style');
style.textContent = `
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
`;
// Append the button and style to the Shadow DOM
this.shadowRoot.append(style, button);
}
}
// Define the new element
customElements.define('my-button', MyButton);
</script>
</body>
</html>
? ????:
HTMLElement? ???? MyButton ???? ???? ??? HTML ??
? ??? ? ????. ??? ??? Shadow DOM? ???? ?? ??? ?? ??? ??????.