show how to use custom properties

riccardoscalco · riccardoscalco · commit 125b0faf215a · 2019-06-08T00:19:11.000+02:00
diff --git a/readme.md b/readme.md
@@ -7,12 +7,25 @@ Web component to implement a ternary plot.
 In an html file
 
 ```html
+<!DOCTYPE html>
 <html>
   <head>
     <script type="module">
       import 'https://unpkg.com/ternary-plot@latest/dist/ternary-plot.umd.js';
     </script>
   </head>
+  <style>
+    @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap');
+    /*
+      CSS custom properties penetrate the Shadow DOM,
+      they are useful to provide custom styling.
+      The ternary-plot webcomponent exposes font-size and font-family custom properties.
+    */
+    ternary-plot {
+      --font-size: 13px;
+      --font-family: 'Roboto Mono', monospace;
+    }
+  </style>
   <body>
     <ternary-plot side="400"></ternary-plot>
   </body>
