Remove inline styling for category colors

Also stop changing color of select options, because it does not work
reliably accross browsers.

1 files changed, 20 insertions, 0 deletions

diff --git a/assets/main.js b/assets/main.js
index bc5d65c..c83e4fc 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -272,3 +272,23 @@ function prettyPrintMonth(isoDate) {
 function capitalize(str) {
     return str.replace(/^\w/, function (c) { return c.toUpperCase() })
 }
+
+/******************/
+/* Web components */
+/******************/
+
+/* Apply color given from attribute.
+ *
+ * This permits not to use the style attribute in HTML to respect a strict CSP policy.
+ */
+customElements.define(
+  'colored-category',
+  class extends HTMLSpanElement {
+    constructor() {
+      super()
+      const span = this
+      span.style = `color: ${span.getAttribute('data-color')}`
+    }
+  },
+  { extends: 'span' }
+)