@polight/lego

Version:

Tiny Web Components lib for future-proof HTML mentors

40 lines (35 loc) • 21.3 kB

HTML

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/assets/css/just-the-docs-default.css"> <script src="/assets/js/vendor/lunr.min.js"></script> <script src="/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Pass Attributes to Web-Components | 🚀 Lego Web-Components</title> <meta name="generator" content="Jekyll v4.2.2" /> <meta property="og:title" content="Pass Attributes to Web-Components" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="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 Within <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 <script> const state = { fontScale: 1 } </script> <template> <h1>Bonjour!</h1> </template> <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: <script> const state = { color: '#357' } </script> <template> <h1>Bonjour<h1> </template> <style> h1 { color: ${ state.color }; } </style> will apply the #357 color onto h1." /> <meta property="og:description" content="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 Within <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 <script> const state = { fontScale: 1 } </script> <template> <h1>Bonjour!</h1> </template> <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: <script> const state = { color: '#357' } </script> <template> <h1>Bonjour<h1> </template> <style> h1 { color: ${ state.color }; } </style> will apply the #357 color onto h1." /> <link rel="canonical" href="http://localhost:4000/v2/usage-web-components/attributes/" /> <meta property="og:url" content="http://localhost:4000/v2/usage-web-components/attributes/" /> <meta property="og:site_name" content="🚀 Lego Web-Components" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2023-03-03T20:30:45+01:00" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Pass Attributes to Web-Components" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2023-03-03T20:30:45+01:00","datePublished":"2023-03-03T20:30:45+01:00","description":"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 Within <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 <script> const state = { fontScale: 1 } </script> <template> <h1>Bonjour!</h1> </template> <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: <script> const state = { color: '#357' } </script> <template> <h1>Bonjour<h1> </template> <style> h1 { color: ${ state.color }; } </style> will apply the #357 color onto h1.","headline":"Pass Attributes to Web-Components","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/v2/usage-web-components/attributes/"},"url":"http://localhost:4000/v2/usage-web-components/attributes/"}</script>  </head> <link rel="stylesheet" href="/assets/css/style.css" /> <body> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header"> <a href="http://localhost:4000/" class="site-title lh-tight"> 🚀 Lego </a> <a href="#" id="menu-button" class="site-button"> <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg> </a> </div> <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav"> <div class="nav-category">v2.0 - alpha</div> <ul class="nav-list"><li class="nav-list-item"><a href="http://localhost:4000/v2/" class="nav-list-link">Welcome</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/getting-started/" class="nav-list-link">Getting Started</a></li><li class="nav-list-item active"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="http://localhost:4000/v2/usage-web-components/" class="nav-list-link">Usage</a><ul class="nav-list "><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/template/" class="nav-list-link">Template tag</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/condition/" class="nav-list-link">Condition :if</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/loop/" class="nav-list-link">Loop :for</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/custom-directive/" class="nav-list-link">Custom directives</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/events/" class="nav-list-link">Binding events</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/reactive/" class="nav-list-link">Reactive properties</a></li><li class="nav-list-item active"><a href="http://localhost:4000/v2/usage-web-components/attributes/" class="nav-list-link active">Pass attributes</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/slots/" class="nav-list-link">Using slots</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/reactive-css/" class="nav-list-link">Reactive CSS</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/script-tag/" class="nav-list-link">Script Tag</a></li></ul></li><li class="nav-list-item"><a href="http://localhost:4000/v2/naming-components/" class="nav-list-link">Naming Conventions</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/compile-components/" class="nav-list-link">Compiling</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/configuring-components/" class="nav-list-link">Configuring</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/advanced-components/" class="nav-list-link">Advanced Example</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/testing-components/" class="nav-list-link">Testing</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/advanced-webcomponents/" class="nav-list-link">Getting deep</a></li></ul> </nav> <footer class="site-footer"> <p>Version 2.0 pre-release</p> <p>Based on <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>.</p> </footer> </div> </section> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search"> <div class="search-input-wrap"> <input type="search" id="search-input" class="search-input" tabindex="0" placeholder="Search the Lego documentation" aria-label="Search " autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> </div> <div id="main-content-wrap" class="main-content-wrap"> <nav aria-label="Breadcrumb" class="breadcrumb-nav"> <ol class="breadcrumb-nav-list"> <li class="breadcrumb-nav-list-item"><a href="">Usage</a></li> <li class="breadcrumb-nav-list-item"><span>Pass Attributes to Web-Components</span></li> </ol> </nav> <div id="main-content" class="main-content" role="main"> <h4 id="component-attributes"> <a href="#component-attributes" class="anchor-heading" aria-labelledby="component-attributes"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Component Attributes </h4> <p>Attributes declared on the components will be all be accessible through the <code class="language-plaintext highlighter-rouge">state</code>. If the property is initialized in the <code class="language-plaintext highlighter-rouge">this.state</code>, the attribute will be reactive:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><x-user</span> <span class="na">status=</span><span class="s">"thinking 🤔"</span><span class="nt">><x-user></span> </code></pre></div></div> <p><code class="language-plaintext highlighter-rouge">status</code> will therefore be reactive and the <em>thinking 🤔</em> attribute value will overwrite the <em>Happy 😄</em> default status.</p> <p>⚠️ A property that is not declared in the <code class="language-plaintext highlighter-rouge">state</code> won’t be reactive.</p> <p>These properties can be accessed through <code class="language-plaintext highlighter-rouge">this.getAttribute()</code> from within the component. After all, these components are just native! 🏡</p> <h4 id="slots"> <a href="#slots" class="anchor-heading" aria-labelledby="slots"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Slots </h4> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot">Slots</a> are part of the native web-component. Because Lego builds native web-components, you can use the standard <em>slots</em> as documented.</p> <p>Example:</p> <p><strong>index.html</strong></p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><user-profile></span> <span class="nt"><span></span>This user is in Paris<span class="nt"></span></span> <span class="nt"><user-profile></span> </code></pre></div></div> <p><strong>bricks/user-profile.html</strong></p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template></span> <span class="nt"><h1></span>User profile<span class="nt"></h1></span> <span class="nt"><p></span>important information: <span class="nt"><slot></slot></p></span> <span class="nt"></template></span> </code></pre></div></div> <p>Will write <code class="language-plaintext highlighter-rouge">…<p>important information: <span>This user is in Paris</span></p></code></p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots">See more advanced examples</a>.</p> <h3 id="reactive-css-within-style"> <a href="#reactive-css-within-style" class="anchor-heading" aria-labelledby="reactive-css-within-style"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Reactive CSS Within <code class="language-plaintext highlighter-rouge"><style></code> </h3> <p>CSS is much more fun when it’s scoped. Here it come with the web-components.</p> <p>Here again, no trick, just the full power of web-components and scoping styles. Well, you should know that the css is reactive too! 😲</p> <p>Writing CSS is as easy as</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script></span> <span class="kd">const</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="na">fontScale</span><span class="p">:</span> <span class="mi">1</span> <span class="p">}</span> <span class="nt"></script></span> <span class="nt"><template></span> <span class="nt"><h1></span>Bonjour!<span class="nt"></h1></span> <span class="nt"></template></span> <span class="nt"><style></span> <span class="nd">:host</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="err">${</span><span class="n">state</span><span class="p">.</span><span class="n">fontScale</span><span class="p">}</span><span class="nt">rem</span><span class="o">;</span> <span class="err">}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></style></span> </code></pre></div></div> <h4 id="host"> <a href="#host" class="anchor-heading" aria-labelledby="host"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Host </h4> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:host()"><code class="language-plaintext highlighter-rouge">:host</code> is a native selector</a> for web-components. It allows to select the current component itself.</p> <h4 id="variables"> <a href="#variables" class="anchor-heading" aria-labelledby="variables"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Variables </h4> <p>You can use variables in your CSS just like in your templates.</p> <p>Example:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script></span> <span class="kd">const</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="na">color</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#357</span><span class="dl">'</span> <span class="p">}</span> <span class="nt"></script></span> <span class="nt"><template></span> <span class="nt"><h1></span>Bonjour<span class="nt"><h1></span> <span class="nt"></template></span> <span class="nt"><style></span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="err">${</span> <span class="n">state</span><span class="p">.</span><span class="n">color</span> <span class="p">}</span><span class="o">;</span> <span class="err">}</span> <span class="nt"></style></span> </code></pre></div></div> <p>will apply the <code class="language-plaintext highlighter-rouge">#357</code> color onto <code class="language-plaintext highlighter-rouge">h1</code>.</p> <hr> <footer> <p class="text-small text-grey-dk-100 mb-0">Lego is <a href=https://github.com/polight/lego>open-source</a>. Distributed under <a href="https://github.com/polight/lego/tree/master/LICENSE.txt">MIT license.</a></p> <div class="d-flex mt-2"> </div> </footer> </div> </div> <a href="#" id="search-button" class="search-button"> <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg> </a> <div class="search-overlay"></div> </div> </body> </html>