CSS Style encapsulation

In this example below you will see how to do a CSS Style encapsulation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hyunjo_on, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hyunjo_on ©

Technologies

  • HTML
  • CSS
<!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;
}

Comments