Book Image

DART Essentials

By : Sikora
Book Image

DART Essentials

By: Sikora

Overview of this book

This book is targeted at expert programmers in JavaScript who want to learn Dart quickly. Some previous experience with OOP programming in other languages and a good knowledge of JavaScript are assumed.
Table of Contents (11 chapters)
10
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...