Recently I came across a very weird issue. When you add more than one style element and if you add title attribute on style element with different value assigned in title. Only the first style element css gets applied.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<style title="Id-1">
h1{color:red}
</style>
<style title="Id-2">
h2{color:blue}
</style>
</head>
<body>
<h1>Hello Red Heading!</h1>
<h2>Hello Blue Heading!</h2>
</body>
</html>Now if you see in above simple HTML code. Following are possibilities of this code working-
- When no title attribute is added - It works.
- When title attribute is added with same value or no value - It works.
- When we assign different value in title attribute as shown in code only the first style element css gets applied i.e. h1 becomes red but no effect on h2.
On solution is to use data- to mark title as custom attribute or data attribute. I am more interested in knowing what is the reason behind this behavior.
To see it in action I have created a plunkr you can visit here
