# The JHS format
`JHS` stands for **J**avascript, **Ht**ml and **S**tyle: one file holding the markup of a custom element
or a view, the javascript class that drives it, and the styles that belong to it. `MMO\client\JHSCompiler`
compiles each file into javascript, and concatenates the lot into `bin/{theme}.jhs.js`.
Nothing in the syntax below is standard html. It is a small template language, and the compiler turns it
into chained calls on a `MMO.elements.View`.
## Two kinds of file
- A **custom element** has an `` root tag. It is a real Web Component: shadow dom, observed
attributes, a lifecycle, registered globally. Its `
```
with the data:
```json
{"name": "John"}
```
### Render a view
```javascript
MMO.domReady(() => {
MMO.elements.View.RenderView('my-view', document.getElementById('my-container'), {name: 'John'});
});
```
A view can also be embedded in another one's markup:
```jhs
```
### Compile a JHS file from PHP
```php
//one file, or several, into one javascript file
\MMO\client\JHSCompiler::Shared()->compile('bin/elements.js', ['src/customElements/elements/my-element.jhs']);
//a string, returning the generated javascript -- with $debug true it comes back indented and readable,
//which is the quickest way to see what a loop or a test actually compiled to
\MMO\client\JHSCompiler::Shared()->compileText($source, sassOpts: [], debug: true);
```
Both take `$sassOpts` and `$scsOpts`; neither needs them for a file that styles itself in `.scs`.
## Styles
A plain `
```
Every element in this package styles itself in `.scs` and none of them writes a `lang`; `lang="sass"`
survives for applications that have not moved yet. Anything else raises *unknown style language*.
The default is `JHSCompiler::$styleLanguage` — a package whose elements are still sass can flip it back
rather than annotate every file.
The compiler puts a prelude in front of every `