<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<app-card>
<template shadowrootmode="open">
<style>
/* Styles scoped to this element */
</style>
<div>
<!-- Template content -->
</div>
<slot></slot>
</template>
<!-- Light DOM content that will be projected through the slot -->
</app-card>
<script>
class AppCard extends HTMLElement {
constructor() {
super();
// No need to attach shadow root here, it's done declaratively in HTML
}
}
customElements.define("app-card", AppCard);
</script>
</body>
</html>
Declarative Shadow DOM
相關文章
- 理解Shadow DOM(一)
- 使用shadow dom封裝web元件封裝Web元件
- # 翻譯:Shadow DOM隔離釋義
- Web Components系列(四) —— 認識 Shadow DOMWeb
- 簡單理解slot演算法和shadow DOM演算法
- 谷歌瀏覽器控制檯顯示shadow DOM谷歌瀏覽器
- 【譯】使用 Shadow DOM 封裝樣式和結構封裝
- QT declarative UI 初探(一)QTUI
- QT declarative UI 初探(二)QTUI
- Shadow DOM 內部構造及如何構建獨立元件元件
- 宣告式 Shadow DOM:簡化 Web 元件開發的新工具Web元件
- 【shadow dom入UI】web components思想如何應用於實際專案UIWeb
- Declarative programming宣告性程式設計程式設計
- JavaScript 是如何工作:Shadow DOM 的內部結構 + 如何編寫獨立的元件!JavaScript元件
- 如何使用 sqlalchemy declarative base 多層次繼承SQL繼承
- unity shadowUnity
- css shadowCSS
- JS21. 使用原生JS封裝一個公共的Alert外掛(HTML5: Shadow Dom)JS封裝HTML
- CSSDIVShadowCSS
- css之ShadowCSS
- [譯] 用 Shadow DOM v1 和 Custom Elements v1 實現一個原生 Web ComponentWeb
- CSS text-shadowCSS
- Shadowsocks 筆記筆記
- css box-shadowCSS
- Shadow Map(陰影貼圖)跟Soft Shadows(軟陰影)
- BOM與DOM之DOM操作
- canvas shadowOffsetY 屬性Canvas
- canvas shadowOffsetX 屬性Canvas
- 使用 Vultr 搭建 ShadowSocks
- canvas shadowBlur 屬性Canvas
- canvas shadowColor 屬性Canvas
- css3box-shadowCSSS3
- shadowmap 及優化優化
- CSS:text-shadow(轉)CSS
- 區別:DOM Core 與 HTML-DOMHTML
- /etc/passwd & /etc/shadow 詳解
- CSSbox-shadow詳解CSS
- css3 box-shadowCSSS3