20.07-attributes.md

layout	title	label	permalink	nav_order	parent
page	Pass Attributes to Web-Components	Pass attributes	/usage-web-components/attributes/	7	Usage

Component Attributes

Attributes declared on the components will be all be accessible through the state. If the property is initialized in the this.state, the attribute will be reactive:

<x-user status="thinking 🤔"><x-user>

status will therefore be reactive and the thinking 🤔 attribute value will overwrite the Happy 😄 default status.

⚠️ A property that is not declared in the state won't be reactive.

These properties can be accessed through this.getAttribute() from within the component. After all, these components are just native! 🏡

Slots

Slots are part of the native web-component. Because Lego builds native web-components, you can use the standard slots as documented.

Example:

index.html

<user-profile>
  <span>This user is in Paris</span>
<user-profile>

bricks/user-profile.html

<template>
  <h1>User profile</h1>
  <p>important information: <slot></slot></p>
</template>

Will write …<p>important information: <span>This user is in Paris</span></p>

See more advanced examples.

Reactive CSS <style>

CSS is much more fun when it's scoped. Here it come with the web-components.

Here again, no trick, just the full power of web-components and scoping styles. Well, you should know that the css is reactive too! 😲

Writing CSS is as easy as

<template>
  <h1>Bonjour!</h1>
</template>

<script>
  export default class extends Lego {
    init() {
      this.state = { fontScale: 1 }
    }
  }
</script>

<style>
  :host {
    font-size: ${state.fontScale}rem;
  }
  h1 {
    padding: 1rem;
    text-align: center;
  }
</style>

Host

:host is a native selector for web-components. It allows to select the current component itself.

Variables

You can use variables in your CSS just like in your templates.

Example:

<template>
  <h1>Bonjour<h1>
</template>
<script>
  export default class extends Lego {
    init() {
      this.state = { color: '#357' }
    }
  }
</script>
<style>
  h1 {
    color: ${ state.color };
  }
</style>

will apply the #357 color onto h1.

<script> tag

The script tag is has a special behavior. You will create a class extending the component, that's how you build your full component with advanced script.

To do so extend the _, that's a naming convention:

export default class extends Lego {
  …
}