Search code examples
javascriptvisual-studiooffice-jsweb-componentword-addins

Office js : can i use web component in my Word addin using Visual Studio?

I wanted to use the web components in my Word addin but I have an error that appears with a simple test, the error is the following: Unable to get property 'define' of undefined or null reference.

Thanks in advance !

Test.js

class MyProduct extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = "hello";
    }
}

window.customElements.define('my-product', MyProduct);        //The error is just here

Test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Word Add-In with Commands Sample</title>

    <script type="module" src="Test.js"></script>

    
</head>
    <body>
        <my-product></my-product>
    </body>
</html>
Solution

  • window.customElements.define('my-product', MyProduct);
    // Unable to get property 'define' of undefined or null reference.

    The JavaScript API for Office is not the same as the FireFox/Chromium/Safari Browser APIs

    The undefined error says: There is no customElements API on the window element.
    (there is no Browser window either)

    To see what you can do with JavaScript in Word see: https://learn.microsoft.com/en-us/javascript/api/word?view=word-js-preview

    For now; no Custom Elements in Office AddIns.