Styles and Shady DOM - Githubissues

tomalec commented 8 years ago

There are issues related to Shady DOM, if we are going to support it (see https://github.com/Polyjuice/starcounter-debug-aid/issues/35), we could find nice way to inject styles.

miyconst commented 8 years ago

The problem is that Polymer scopes the styles imported inside shady dom, and the dom of json editor is created by third party library, which does not add scope classes.

There was a no-shim property in Polymer 0.5, which does not seem to work in Polymer 1.x: https://www.polymer-project.org/0.5/docs/polymer/styling.html

We could manually import styles with javascript to avoid the scoping.

Right now the styles are imported like:

<link rel="import" type="css" href="../../jsoneditor/dist/jsoneditor.min.css">

https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets

warpech commented 8 years ago

Looks really bad with default Polymer:

I guess the easiest solution is to put <link rel="stylesheet"> to <head> using JavaScript. I guess this is what @miyconst proposed.

miyconst commented 8 years ago

Fixed and released as 1.0.4. Now the demo works in all browsers (Chrome, IE, FF).

The jsoneditor styles are being injected to head only if Shadow DOM is not enabled.

To make it work in Shady DOM I removed markdown-body class from the parent container and wrapped text blocks with <div class="markdown-body">, otherwise GitHub styles destroy jsoneditor.

warpech commented 8 years ago

Nice!

yveslange commented 6 years ago

Hi,

How can I change the blue color that appears on the header and the borders ?

tomalec commented 6 years ago

Currently, there is no easy straight forward CSS selector to do that. As the header is inside Shadow DOM, and shadow piercing selectors were deprecated. In long term future we may consider shadow dom parts

For now, you can try to use imperative API, like:

  <juicy-jsoneditor id="editor"></juicy-jsoneditor>
  <style id="customStyle">
    div.jsoneditor-menu{
        background-color: lightgreen;
        border-color: lightgreen;
    }
    div.jsoneditor{
        border-color: lightgreen;
    }
  </style>
  <script>
    editor.injectTheme('#customStyle');
  </script>

See working example at https://jsbin.com/cahiluq/edit?html,output

Alternatively, we could try to implement the feature as in https://github.com/Juicy/juicy-ace-editor#attributes, so you would be able to do the same trick but slightly shorter:

  <style id="customStyle">
    div.jsoneditor-menu{
        background-color: lightgreen;
        border-color: lightgreen;
    }
    div.jsoneditor{
        border-color: lightgreen;
    }
  </style>
  <juicy-jsoneditor shadow-style="#customStyle"></juicy-jsoneditor>

Does this meet your need? If not please provide your use case, preferably in the new issue :)

Juicy / juicy-jsoneditor

Styles and Shady DOM #5