```
### CSS Styles (`world.css`)
```css
:host {
display: block;
}
[part~=message] {
/* Style Part */
}
```
## Advanced
Starting with a simple component can allow one to extend it with more features later on. This can be done by extending components.
```
📂 src/
📂 hello/
📂 world/
📃 world.ts
📃 world.html
📃 world.css
📂 worldButton/
📃 worldButton.ts
📃 worldButton.html
📃 worldButton.css
```
### TypeScript (`worldButton.ts`)
```typescript
import { Component, Prop, Part } from '@mdi/element';
import HelloWorld from '../world/world';
import style from './worldButton.css';
import template from './worldButton.html';
@Component({
selector: 'hello-world-button',
style,
template
})
export default class HelloWorldButton extends HelloWorld {
@Part() $button: HTMLButtonElement;
renderCallback() {
this.$button.addEventListener('click', () => {
alert(this.message);
});
}
}
```
### Template (`worldButton.html`)
```html
```
### CSS Styles (`worldButton.css`)
```css
[part~=button] {
border-radius: 0.25rem;
border: #ddd;
color: #222;
}
```
### `@Local(initialValue[, key])`
To access localStorage values bind them to variable.
```js
// Default to 42
@Local('42') foo;
// Default to 42 and share a global key
@Local('42', 'sharedKeyName') foo;
```
## Development
```
# Build
npm run build
# View files in dist/
# Then link for use locally
npm link
# Within a local project directory
npm link @mdi/element
```
## Other
Some other notes about unique use cases that are handled.
### Optional `Component()` Config
Utility base classes can be defined without a config. These are rarely used, but are supported.
```typescript
import { Component } from '@mdi/element';
@Component()
export default class HelloOverlay extends HtmlElement {
static open() {
}
close() {
}
}
```
---
_Source: https://npm.io/package/@mdi/element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._