Book Image

Dart Essentials

Book Image

Dart Essentials

Overview of this book

Table of Contents (16 chapters)
Dart Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using Shadow DOM


As we want to apply styles from greeting.html only to elements in greeting.html, we'll wrap it with HTML5 Template. As we mentioned earlier in this chapter, everything inside the <template> tag will get parsed into DOM elements but won't be run. This means that styles inside <template> have no effect until we paste them outside of the template:

<!-- web/greeting.html -->
<template>
  <style>
  h1 { color: blue; }
  h2 { color: yellow; }
  </style>
  <h1>Hello, imported world!</h1>
</template>

In order to make it more like a real-world example, we'll add some styles to index.html as well:

<!-- index.html -->
<head>
  <link rel="import" href="greeting.html" id="myElementLink">
  <style>
  h1 { color: red !important }
  h2 { color: green; }
  </style>
</head>
<body>
  <h2>Greeting here</h2>
  <!-- Insert greeting here. -->
  <!-- We'll create Shadow DOM in this...