Web Components

Web Components

• Web Components is a suite of different technologies allowing you to create reusable custom elements
• Their functionality encapsulated away from the rest of your code
• Ensure your element, methods, events, attributes, and properties are well documented
• Use @attribute, @property, @method, @event to document the API for your element.
• Ensure any styling hooks or accepted light DOM are documented in the element summary
• Follow the Web Component best practices guide where possible
• Ensure your elements are accessible from the get-go

                                                        
                                                        
                                                            <co-password-element required></co-password-element>
                                                        <co-icon name="arrow-down" set="16"></co-icon>
                                                        <co-input type="number" label="Amount:"></co-input>
                                                        
                                                            

Naming

• The components should have custom names, So, instead of regular names like "span" or "div" you name your components as you want, with the condition that those names contain at least one dash.
• Elements should be prefixed with "co-" e.g. <co-icon>
• Where multiple words are required for the name, they should be separated with a dash e.g. <co-password-element>
• Components should always have unique names
• Follow the web components guidelines for more details

Lit Elements

• We use Lit which is a simple library for building fast, lightweight web components
• CSS variables are used to style lit elements based on the brand theme

                                                        
                                                        
                                                            import {LitElement, html, css} from 'lit';
                                                        import {customElement} from 'lit/decorators.js';
                                                        
                                                        @customElement('my-element')
                                                        export class MyElement extends LitElement {
                                                          static styles = css`
                                                            :host {
                                                              color: var(--my-element-text-color, black);
                                                              background: var(--my-element-background-color, white);
                                                              font-family: var(--my-element-font-family, Roboto);
                                                              display: block;
                                                              padding: 8px;
                                                              margin: 8px;
                                                            }
                                                          `;
                                                          protected render() {
                                                            return html`<div>Hello World</div>`;
                                                          }
                                                        }