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...