Closed tomalec closed 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
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.
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.
Nice!
Hi,
How can I change the blue color that appears on the header and the borders ?
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 :)
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.