Markdalgleish.com Website Review

At first glance, they may seem like a complicated set of new technologies, but Web Components are built around a simple premise. Developers should be free to act like browser vendors, extending the vocabulary of HTML itself. If you’re intimidated by these new technologies or haven’t experimented with them yet, this post has a very simple message for you. If you’re already familiar with HTML elements and DOM APIs, you are already an expert at Web Components. As an example, let’s run through the process of consuming a typical third-party widget. Next, we might need to add placeholder elements to the page where our widgets will be inserted. Finally, when the DOM is ready, we reach back into the docu*ent, find the placeholder elements and instantiate our widgets: We’ve introduced a custom widget to the page, but it is not aware of the browser’s element lifecycle. This becomes clear if we update the Since this isn’t a typical element, we now must manually instantiate any new widgets as we update the docu*ent: The most common way to avoid this constant two-step process is to completely abstract away DOM interaction. Unfortunately, that’s a pretty heavy-handed solution that usually results in widgets being tied to particular libraries or frameworks. Once our widgets have been instantiated, our placeholder elements have been filled with third-party markup: This markup is now sitting in the same context as our application markup. Its internals are visible when we traverse the DOM, and the styles for this widget exist in the same global context as our styles, leading to a high risk of style clashes. All of their clas*es must be carefully namespaced with my-widget- (or something similar) to avoid naming Our code is now all mixed up with the third-party code, with no clean separation between the two. Basically, there is no encapsulation With Web Components, it becomes clear what we’ve been missing. In this case, we’ve imported a new custom element with a single import and used it immediately.