HTML5自定义元素：菜单的实现
<!DOCTYPE html>
<html>
<head>
<title>HTML5 自定义元素: 菜单实现</title>
<script src="custom-elements.js"></script>
</head>
<body>
<menu-bar>
<menu-item>首页</menu-item>
<menu-item>产品</menu-item>
<menu-item>关于我们</menu-item>
</menu-bar>
<script>
class MenuBar extends HTMLElement {
constructor() {
super();
this.ul = document.createElement('ul');
this.attachShadow({mode: 'open'}).appendChild(this.ul);
this.render();
}
render() {
const menuItems = this.querySelectorAll('menu-item');
menuItems.forEach(menuItem => {
const li = document.createElement('li');
li.textContent = menuItem.textContent;
this.ul.appendChild(li);
});
}
}
customElements.define('menu-bar', MenuBar);
</script>
</body>
</html>这段代码定义了一个名为menu-bar的自定义元素，它会渲染所有menu-item元素作为列表项。当页面加载时，menu-bar元素会创建一个ul列表，并将每个menu-item元素的内容作为列表项添加到ul中。
评论已关闭