## Introduction To Components Until this point, we have not shown you the `head` HTML element or used a `style` block. All HTML pages using Lightview MUST include include a `lightview.js` file as a regular (not `module`) script in their head or close to the top of the `body`. You MAY treat an entire page as a component by passing `lightview.js` the query string `as=x-body`. The document body will get replaced with the custom element `x-body`. When you use `as=x-body`, the page becomes a component with its HTML rendered in a shadow DOM. You MAY include a `style` block that will be isolated to the shadow DOM. And, you MAY include a `script` block with the id "lightview", the variables of which are also isolated to the shadow DOM unless you explicitly add them to an object with higher scope, e.g. `window` or `document`. The execution of the script is not isolated. The script can walk up the DOM and out of the shadows unless you explicitly render the component in an `iframe`. You may also include other script blocks, which will also be somewhat isolated to the shadow DOM. *Note*: If you do not include `id="lightview"` for the script block you expect to provide Lightview type behavior, the component will not behave properly. On this page we continue to let you edit the script block. On the next page we will use a `template` tag to define the component and create it manually with a regular script. Take the opportunity on this page to inspect the preview area using your JavaScript debugger and look at the `iframe` code with the id "preview", note how the body gets replaced with an element named `x-body`.