Add id as css scope

package.json

@@ -42,7 +42,8 @@
     "graphlibrary": "^2.2.0",
     "he": "^1.1.1",
     "lodash": "^4.17.5",
-    "moment": "^2.21.0"
+    "moment": "^2.21.0",
+    "scope-css": "^1.0.5"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

src/mermaidAPI.js

@@ -12,6 +12,7 @@
  * somewhere in the page or something completely different.
 */
 import * as d3 from 'd3'
+import scope from 'scope-css'
 
 import { logger, setLogLevel } from './logger'
 import graph from './diagrams/flowchart/graphDb'
@@ -438,7 +439,7 @@ const render = function (id, txt, cb, container) {
   // insert inline style into svg
   const svg = element.firstChild
   const s = document.createElement('style')
-  s.innerHTML = themes[config.theme] || defaultTheme
+  s.innerHTML = scope(themes[config.theme] || defaultTheme, `#${id}`)
   svg.insertBefore(s, svg.firstChild)
 
   d3.select('#d' + id).selectAll('foreignobject div').attr('xmlns', 'http://www.w3.org/1999/xhtml')

src/themes/mermaid.scss

@@ -1,4 +1,3 @@
-.mermaid {
   @import 'flow';
   @import 'sequenceDiagram';
   @import 'gantt';
@@ -23,4 +22,3 @@
     pointer-events: none;
     z-index: 100;
   }
-}

yarn.lock

@@ -7135,6 +7135,10 @@ schema-utils@^0.4.2:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
+scope-css@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/scope-css/-/scope-css-1.0.5.tgz#9a40a959231ecf683dbef3dedae6a26ab091e1fd"
+
 scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"