Beispiel:HTML-shadow-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />  
<script>
</script>  
<style>
p {
  color: white;
  background-color: black;
}
</style>
<title>Shadow DOM - 1</title>
</head>

<body>
  <h1>Shadow DOM - 1</h1>
  
  <main>
    <p>Dieser Text steht im normalen DOM</p>
    <div id="shadowHost">
      <template shadowrootmode="open">
        <style>
          p { color: red; border: 1px dashed; }
        </style>
        <p>Dieser Text steht im Shadow-DOM.</p>
      </template>
    </div>
  </main>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-shadow-2.html&oldid=95863“