Hi Steve, thanks for the excellent series. I now have a better understanding of custom web components. May I suggest you to create a follow-up video to the series? A custom web component of "confirmation box" is something a lot of people would like to have, but unable to create on ones own. A confirmation box is a bit more difficult is it passes a value back to the main DOM, which is not required for most other HTML elements.
Thanks for the wonderful series on web components (and the many others). I am trying to create a navbar web component so I can easily add it to every page of my bootstrap application, but I cannot seem to get the drop-down functionality to work as expected. Could you please point me in the right direction or let me know if I'm barking up the wrong tree in attempting to use bootstrap and web components together? Many thanks, Professor!
Try not to think of the components and the ui framework as being part of the same thing. You don't want to import a huge CSS library into a component. The component should have just the CSS that it needs to control its layout and positioning. Stuff like colors and fonts can be inherited. Components should be minimal, agnostic, portable, and easy to add to any website. Build the component so its layout and functionality work without anything but the code that you write inside the component. Then think about using CSS custom properties (variables) to be able to set colours from the parent site.
Using a library or framework means you are using a wrapper around the web component functionality. They are meant to solve common problems, give you some base styling and boilerplate code to save you time.
Hello Steve, 13:20 I have changed my attachShadow mode property to 'open' but I still cannot access when I inspect the page with devtools, running document.querySelector('root') on the devtools console, returning null.
Hi Steve, when I make an addition to main with the sample component you gave, the button does not appear why? setTimeout(() => { const bb = document.createElement('big-bang'); const btn = document.createElement('span'); const title = document.createElement('h2'); title.setAttribute('slot', 'title'); title.textContent = 'Test title ...'; btn.setAttribute('slot', 'done'); bb.innerHTML = `Done`; btn.textContent = 'OK'; bb.setAttribute('action', 'hello'); bb.append(title); document.getElementsByTagName('main')[0].appendChild(bb); }, 1000);
Hi Steve. Thanks for sharing all these videos for years now. Your style of teaching is the best and you don't try to sell anything. Just one quick question. Is it possible to make a full time income doing web development freelancing job by knowing just HTML, CSS, Javascript, React, and Node JS? Thanks!
I searched 30min why this window[this.action] undefind. I have made html File the main.js import with type="module". This not works. The window object has not the properties from main.js.😅
my HTML slot always returns undefined. ` let btnSlot = this.root.querySelector('p button slot'); let htmlSlot = btnSlot.assignedNodes()[0]; console.log(htmlSlot);`
