New to bower and web components. I'm trying to install the polymer-quill library with bower.
npm install -g bower
mkdir polymerquill
cd polymerquill
bower install --save polymer-quill
Now I have a full bower_components directory. I make an index.html file and add the following:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer-quill/polymer-quill.html">
</head>
<body>
<h1>PolyQuill</h1>
<style is="custom-style">
polymer-quill.full {
--polymer-quill-editor-max-height: 300px;
--polymer-quill-editor-min-height: 100px;
}
</style>
<h2>Full Toolbar, Show Results, Max Height (300px), Min Height (100px), Save as Deltas, Save every 1 second</h2>
<polymer-quill content='{"ops":[{"insert":"Hello World! - Store as Delta"},{"attributes":{"header":2},"insert":"\n"}]}'
class='full'
store-as="delta"
save-interval="1000"
toolbar-type="full"
show-results>
</polymer-quill>
<h2>Standard Toolbar, Hide Results, Default height (100px), Save as HTML, Save every 2 seconds</h2>
<polymer-quill content="<h2>Hello World! - Store as HTML</h2>" store-as="html"></polymer-quill>
</body>
</html>
When I open it in Chrome, however, I only see the h2's. The polymer-quill elements don't render. What am I forgetting to do?
I believe this element currently only works in Polymer's shady DOM (see issue here).
If you're using Polymer 1.0, declare shady DOM by adding the following script in your index.html: (reference)
<script>
/* this script must run before Polymer is imported */
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
</script>
If you're using Polymer 2.0, when importing webcomponents just add the shadydom attribute as follows:
<script src="webcomponentsjs/webcomponents-loader.js" shadydom></script>