Running modern 2022 native Web Components in Microsoft365/SharePoint Online

Question

I am an old CEWP user. Haven't used SharePoint in years.

For a new Online project I have been asked to explore if my team (some 50+ autistic people with distance to the labor market) can work on a Microsoft365 environment.

All I can find is blogs that require the whole React toolchain.
My team has basic HTML and JavaScript skills, I can't teach them this React voodoo, they understand native Web Components (as its basic HTML and JS skills)

Only CEWP like reference I could find is: 2019: https://spjsblog.com/modern-cewp/
But has several issues and no long maintained

Is it no longer possible to include JavaScript in a page like this ?

<script>
// comes from one CDN file
customElements.define("copy-right", class extends HTMLElement{
  connectedCallback(){
    this.innerHTML = `Copyright ACME - 2022`;
  }
});
</script>

<copy-right></copy-right>

Answer 1

Unfortunately, there is no SharePoint out of the box web part using which you can add JavaScript to modern pages.

You have below two options:

1. If you are trying to add custom JavaScript to all modern pages, you can use SPFx application customizer to inject custom JavaScript/CSS. Follow for more information: How can I include the same JS and CSS files on multiple SharePoint Modern Page?

2. If you are trying to add custom JavaScript to individual modern pages, you can use modern script editor web part

   Check this web part: Script editor web part for modern pages

---

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.