Airhorner Custom Element

I made the <air-horner> custom element to learn more about the web component ecosystem and how to deploy them at scale. I don’t expect this to be used by anyone, but it helped me set a direction for my team in how we try and support and plan for a web component future.
I learn’t a couple of significant things:
We don’t know how to deploy these at scale yet.


This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

I made the <air-horner> custom element to learn more about the web component ecosystem and how to deploy them at scale. I don't expect this to be used by anyone, but it helped me set a direction for my team in how we try and support and plan for a web component future.

I learn't a couple of significant things:

  • We don't know how to deploy these at scale yet.
  • With HTML Imports going away, at the time of writing we don't have a good way of including templates that are anything but strings in JavaScript. It looks like lit-html might be a good path.
  • There wasn't a lot of guidance on the web about attributes vs properties.
  • Deploying multiple assets with one element is hard - where do my audio files go?
  • Theming is still a pain.
  • I really like slots. I love the idea of reprojection.

If you are really interested, you can see it below.

<script src="/javascripts/air-horner.js"></script>
<style>
air-horner {
    display: block;
    height: 300px;
}
</style>

<air-horner></air-horner>


This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan


Print Share Comment Cite Upload Translate Updates
APA

Paul Kinlan | Sciencx (2017-04-15T12:20:31+00:00) Airhorner Custom Element. Retrieved from https://www.scien.cx/2017/04/15/airhorner-custom-element/

MLA
" » Airhorner Custom Element." Paul Kinlan | Sciencx - Saturday April 15, 2017, https://www.scien.cx/2017/04/15/airhorner-custom-element/
HARVARD
Paul Kinlan | Sciencx Saturday April 15, 2017 » Airhorner Custom Element., viewed ,<https://www.scien.cx/2017/04/15/airhorner-custom-element/>
VANCOUVER
Paul Kinlan | Sciencx - » Airhorner Custom Element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2017/04/15/airhorner-custom-element/
CHICAGO
" » Airhorner Custom Element." Paul Kinlan | Sciencx - Accessed . https://www.scien.cx/2017/04/15/airhorner-custom-element/
IEEE
" » Airhorner Custom Element." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2017/04/15/airhorner-custom-element/. [Accessed: ]
rf:citation
» Airhorner Custom Element | Paul Kinlan | Sciencx | https://www.scien.cx/2017/04/15/airhorner-custom-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts