diff --git a/templates/basic/src/components/code-block.js b/templates/basic/src/components/code-block.js
index 5a1243d..a518d5a 100644
--- a/templates/basic/src/components/code-block.js
+++ b/templates/basic/src/components/code-block.js
@@ -1,22 +1,22 @@
-// @ts-check
-/**
- * Custom element using a minimal Web Component Base class
- * @see https://ayco.io/n/web-component-base
- */
-class CodeBlockComponent extends WebComponent {
- // initialize props
- language;
+class CodeBlockComponent extends HTMLElement {
+ connectedCallback() {
+ const trimmed = this.innerHTML.trim();
+ const lang = this.getAttribute("language");
+ const inline = this.getAttribute("inline") !== null;
- // tell browser which props to cause render
- static properties = ["language"];
+ this.innerHTML = `
+
${trimmed}
+ `;
- // Triggered after view is initialized
- afterViewInit() {
/**
- * Provides autocompletion on IDEs when @ts-check is enabled on first line
- * @type {HTMLPreElement} */
+ * @type {HTMLPreElement}
+ */
const pre = this.querySelector("#pre");
+ if (lang) {
+ pre.className = `language-${lang}`;
+ }
+
/**
* @type {Partial}
*/
@@ -29,18 +29,15 @@ class CodeBlockComponent extends WebComponent {
borderRadius: '5px'
};
+ console.log('>>> inline', inline, this)
+
+ if (inline) {
+ style.display = 'inline';
+ style.padding = '0.3em';
+ }
+
Object.keys(style).forEach((rule) => {
pre.style[rule] = style[rule];
});
}
-
- // readonly template
- get template() {
- const trimmed = this.innerHTML.trim();
- return `
-
${trimmed}
- `;
- }
}
diff --git a/templates/basic/src/components/my-head.html b/templates/basic/src/components/my-head.html
index 0a2fbc4..4656ed4 100644
--- a/templates/basic/src/components/my-head.html
+++ b/templates/basic/src/components/my-head.html
@@ -1,8 +1,7 @@
- McFly: Back to the Basics. Into the Future.
-
+
+ McFly: Back to the Basics. Into the Future.