how do i use prismjs when importing into a web-component

Question

I am attempting to use prismjs from a file I am importing into a web-component.

Here is the function which is supposed to return the prismjs highlighted code block

import Prism from 'prismjs';

function article() {
     const code = `var data = 1`;
     const html = Prism.highlight(code, Prism.languages.javascript, 'javascript')
     const pre = document.createElement('pre')
     const _code = document.createElement('code')
     _code.classList = 'language-js'
     _code.innerHTML = html
     pre.appendChild(_code)

     return pre
}

and here is my web-component

 export default class PostComponent extends HTMLElement {
     constructor() {
         super()
         this.shadow = this.attachShadow({mode: 'open'})
         this.styleSheet = document.createElement('style')

         window.addEventListener('popstate', async (e) => {
             const path = e.state;
             const module = await GetArticle(path)

             this.articleName = module.title()
             this.canvasApp = module.canvasApp()
             this.article = module.article()

             this.shadow.replaceChildren(
                 this.styleSheet,
                 this.articleName,
                 this.canvasApp,
                 this.article
             )
         });

     }

     connectedCallback() {
         this.RenderView();
     }

     RenderView() {
         this.styleSheet.textContent = Style;
     }
 }

I am including the prism.min.css from index.html.

What gets ultimately rendered is an unhighlighted code element which is not what I am looking for. I have tried using Prism.highlightAll() in the article() function and the constructor but neither works.

Answer 1

You are adding the CSS to the global scope; but global CSS can not style shadowDOM

You need to load that CSS inside the shadowDOM.

You also do not want to load the <script src=".../prism.js"> in your HTML. It is a dependency of the Web Component. So the (JSWC) Web Component loads it when required

About that setTimeout, see my blogpost:
Web Component developers do not connect with the connectedCallback (yet)

As alternative see: https://github.com/FIameCaster/prism-code-editor

<script>
  customElements.define("prism-code", class extends HTMLElement {
    connectedCallback() {
      const createElement = (tag, props = {}, element = document.createElement(tag)) => {
        if (props.append) { element.append(...props.append); delete props.append }
        return Object.assign(element, props);
      };
      setTimeout(() => { // wait till lightDOM is parsed
        new Promise((resolve, reject) => {
          if (window.Prism) { resolve(); return }
          document.head.append(
            createElement("script", {
              src: "https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js",
              onload: resolve, onerror: reject,
            })
          );
        }).then(() => {
          this.attachShadow({ mode: "open" }).append(
            createElement("style", {
              textContent: `@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css');`,
            }),
            createElement("pre", {
              append: [
                createElement("code", {
                  className: `language-${this.getAttribute("language") || "javascript"}`,
                  textContent: this.textContent.trim(),
                }),
              ],
            })
          ); //append
          Prism.highlightAllUnder(this.shadowRoot);
        }); // then
      }, 0); // setTimeout
    } // connectedCallback
   } // class
  ); // customElements.define
</script>

<prism-code>
// This is a sample JavaScript code
function helloWorld() {
    console.log('Hello, world!');
}
helloWorld();
</prism-code>