{items.length > 2 ? 'many' : 'few'}
{`${firstName} ${lastName}`}
{contact?.account?.name}
{label.toUpperCase()}
``` More interesting is where the wall actually is. These five are rejected: | Expression | Compiler | | -------------------------- | --------------------------------------------------------- | | {count = 5} | Field mutations are only permitted within arrow functions | | {count++} | Field mutations are only permitted within arrow functions | | {new Date().getFullYear()} | Use of object instantiation is disallowed | | {(count, label)} | Use of comma operators is disallowed | The pattern behind it is actually simple. If an expression mutates state or creates an object - it is rejected. If it only reads and calculates - it is allowed. What the compiler does not check though, is whether the thing you are referencing actually exists. Inside a template expression you only have access to your own component, and every global is undefined in there, including `window`, `document`, `Math` and `JSON`.  Template Expression Error So you have to be extremely precise about what you put in those expressions, and reference only the properties that actually exist on your component. ### Use Third-Party Web Components in LWC (Generally Available) You can now render third-party custom elements inside LWC templates without rewriting them, by using `lwc:external`. This one is also generally available with no changes since the last beta. The way it works is you upload the already-built JavaScript file and then load it at runtime with `loadScript` from `lightning/platformResourceLoader`. It has to be a plain browser bundle in [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE?ref=bulkifiedthinking.com) or [UMD](https://github.com/umdjs/umd?ref=bulkifiedthinking.com) format, because `loadScript` does not support ECMAScript modules, and you cannot import a web component from `npm` into your LWC bundle either. ```JavaScript import { LightningElement } from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import FANCY from '@salesforce/resourceUrl/fancyWidget'; export default class ExternalWidget extends LightningElement { hasLoaded = false; renderedCallback() { if (this.hasLoaded) { return; } this.hasLoaded = true; loadScript(this, FANCY).catch((error) => { // ... }); } } ``` And the template, where the only new thing is the directive itself: ```HTMLHello from shadow DOM
`; ✅ this._shadow = this.attachShadow({ mode: 'closed' }); ✅ this._shadow.innerHTML = `Hello from CLOSED shadow DOM
`; ``` ### Global Access Is Restricted If a 3rd-party web component uses the global `document` object to retrieve an existing element by ID (note: creating a new element is acceptable), this can and will lead to unexpected behavior. To resolve this issue, open the source code of the web component and locate all instances where an element is queried by ID. For example: ```javascript document.getElementById('some-id'); ``` There are many possible approaches here, but one of the simplest, and my preferred approach, is to use the component’s Shadow DOM instead of accessing the global document object. For instance: ```javascript class MyCustomElement extends HTMLElement { constructor() { this._shadow = this.attachShadow({ mode: 'closed' }); } someFunction() { ❌ document.getElementById('some-id'); ✅ this._shadow.getElementById('some-id'); } // ... ``` ### Dependencies or Modules If you’ve reached this point and your web component still doesn’t work, the most likely issue is that the component uses or relies on external dependencies or ES modules. **What does this mean?** For example, suppose your Web Component includes the following line of code: ``` ``` What’s actually happening here is that the Web Component is attempting to load a JavaScript module directly from an external source, a resource that hasn’t been uploaded as a static resource in your Salesforce org. The rule is simple: **only scripts that have been added as static resources and loaded using `loadScript()`** can be used in Lightning Web Components (LWC). Anything else, such as external `