Part One: Welcome to Eagleton labs
Hello, dear inventor-in-training. In this lab we research and build web components to be used by the folks upstairs. If you do good work you might one day get to meet them.
Here's your workstation and back there that's the coffee machine. Oh, when it was cleaned last? I don't know, do machines like that need cleaning?
Nevermind.
As you can see there's already a stack of requests on your desk for various web components that the upstairsfolk need to be crafted. Here's your complementary company mug for your coffee imbibement. I won't close the door on my way out so the airdraft can circulate away some of that mold smell. Best of luck with your work!
The name plate
Yes, this assignment is from me, your boss that just left out the door.
I noticed that there is no name plate on your door, nor on your desk. Could you please fashion yourself a web-component with your name and place it on your desk?
- Pop open this html page in your favorite editor, and have a look at the HTML.
- Use customElements.define() to define new, nifty HTML tags.
- In addition to console.log() be sure to familiarize yourself with the trusty debugger statement.
The misplaced slide-clicker
Hi, it's Wanda from the backend engineering department. We seem to have misplaced the code for advancing our web-based powerpoint implementation. As it stands we're unable to move any of our presentations beyond the first slide.
Normally, we would have built this ourselves but our draconic company policy prevents backend developers and frontend developers from working on each other's domain of expertise. I damn near had to smuggle this message to you on a paperplane.
So, what we need from you is a slide-clicker component that can dispatch events to our "powerpointer-3000" machine. Attached to this letter you'll find a floppy disk with a copy of the powerpointer code. Good luck!
- Search the codebase and have a peek at the source code of the powerpointer-3000.mjs file.
- Here's how to create and dispatch custom events.
The creativity protector
Hi, it's Greg from accounts. I am in need of a font-style component that would prevent my colleagues from overriding my text styling with their CSS !important rules. They say I'm not a designer and should not be specifying font-styles but why can't accountants be allowed to add some extra flair to their text?
Attached below you can see an example of the styling that my colleagues use to supress my creative juices. Please build me a web component that will style and protect my precious text.
Here's some text that I'd wish would have some extra flair! But it didn't help putting style attributes directly on the paragraph. And I cannot touch the actual CSS that we have.
- A web component can use the slot element to display content it wraps inside it, but that's not useful here because the host page's styling can still reach it.
- Instead you should create some shadowDOM and copy the web component's children into the shadowDOM.