<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Style encapsulation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<script type="text/javascript" src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://gist.githubusercontent.com/pukapukan/e3e65304c7fcf2113a5a/raw/96985e83d65081bdda2e9c0f851d411bf76a2b15/my-wrapper.html">
<link rel="import" href="https://gist.githubusercontent.com/pukapukan/e3e65304c7fcf2113a5a/raw/36bbcf71cbf7f9f5c8954712e32d51f617e5ac2e/my-fa-wrapper.html">
<my-wrapper>
font-awesome: <i class="fa fa-codepen fa-lg"></i> <my-fa-wrapper attr="fa-twitter"></my-fa-wrapper>
</my-wrapper>
</body>
</html>
/*Downloaded from https://www.codeseek.co/hyunjo_on/css-style-encapsulation-empoRm */
@font-face {
font-family: 'FontAwesome';
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0//fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0//fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0//fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0//fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0//fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
body /deep/ i.fa {
padding: 10px;
border: 1px solid black;
border-radius: 5px;
background-color: grey;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Polymer
