Open
Description
From @mercmobily on July 1, 2016 2:19
If you have a simple file test.html:
<!DOCTYPE html>
<html>
<head>
<script>
window.Polymer = { lazyRegister: true, dom: 'shadow'};
</script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="extra-styles.html">
<style is="custom-style" include="extra-styles"></style>
<style>
h1 {
color: blue;
}
</style>
<title>Extra CSS styles</title>
</head>
<body>
<h1>What colour am I?</h1>
</body>
</html>
And extra-styles.html is:
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="extra-styles">
<template>
<style>
h1 {
color: red;
}
</style>
</template>
<script>
Polymer({
is: 'extra-styles'
});
</script>
</dom-module>
You will see that:
- Using shadow DOM, the writing is blue
- Using shady DOM, the writing is red.
This is because the style set in extra-styles is more specific:
h1:not([style-scope]):not(.style-scope)
Copied from original issue: Polymer/polymer#3758