send-feedback: Add option to specify external stylesheet.

Author: priyank-p

docs/customizing.md

@@ -1,9 +1,15 @@
 # customizing
 
-This documentation section  will guide you through the process,
+This documentation section will guide you through the process,
 of how to customize the `<send-feedback>` element. The one of the great
 feature of custom elements.
 
+### Customize the design
+There are two was to provide custom css. Through a css file or
+by directly providing css. Set the `customStylesheet` to the link
+of the stylesheet to use it. You can also set the `customStyles` to
+css you want, for example, `sendFeedback.customStyle = ':host { padding: 10px; }'`.
+
 ### Title
 
 The title of an element, the default is `Send Feedback`

docs/index.md

@@ -14,16 +14,17 @@ const SendFeedback = require('@electron-elements/send-feedback');
 customElements.define('send-feedback', SendFeedback);
 ```
 
-By default, the element has responsive design out of the box. But if you want to customize
-the design of the element you can do:
+By default, the element has responsive design out of the box. But if you want
+to customize the design of the element you can do:
 ```javascript
 const sendFeedback = document.querySelector('send-feedback');
+sendFeedback.customStylesheet = `custom.css`; // link to custom css file!
+// OR
 sendFeedback.customStyles = `* { padding: 20px }`;
 ```
 
 To remove default styles you can do `sendFeedback.removeDefaultStyles = true`. **Note:** This
-will remove all the styles we ship with this custom elements, which most of the times is not needed,
-because you can add custom css to tweak some design as show above.
+will remove all the styles we ship with this custom elements, which most of the times is not needed, because you can add custom css to tweak some design as show above.
 
 Once you feel like designs are in place or you like the default design.
 You need to use a `reporter` by calling `sendFeedback.useReporter`, for this example we use

lib/index.js

@@ -44,7 +44,8 @@ class SendFeedback extends HTMLElement {
       'textarea-placeholder',
       'button-label',
       'cancel-label',
-      'show-cancel-button'
+      'show-cancel-button',
+      'custom-stylesheet'
     ];
   }
 
@@ -64,6 +65,7 @@ class SendFeedback extends HTMLElement {
     this._button = shadowRoot.querySelector('button');
     this._cancel = shadowRoot.querySelector('#cancel');
     this._loader = shadowRoot.querySelector('.loader');
+    this._link = shadowRoot.querySelector('link');
 
     this._textarea.addEventListener('input', this._recheckErrorClass);
     this._titleInput.addEventListener('input', this._recheckErrorClass);
@@ -218,6 +220,11 @@ class SendFeedback extends HTMLElement {
       return;
     }
 
+    if (updatedAttr == 'custom-stylesheet') {
+      this._link.href = _new;
+      return;
+    }
+
     const el = selectors[updatedAttr];
     if (updatedAttr.includes('placeholder')) {
       el.setAttribute('placeholder', _new);

lib/templates.js

@@ -164,6 +164,7 @@ templates.add('send-feedback', `
   }
 </style>
 <style class="custom-styles"></style>
+<link rel="stylesheet">
 `);
 
 templates.add('send-feedback-content', `