CustomElements | Custom Elements Polyfill | Web Framework library

Now I understand. You want to prevent:

let timeStamp = this.parentNode.parentNode.parentNode.creationTimestamp;

There are multiple StackOverflow answers tackling this:

1. Let the child find a parent
   In control: child
   mimic standard JS .closest(selector) which does not pierce shadowRoots!
   with a custom closestElement(selector) function:
   Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

2. Make the parent tell something to a child
   In control: parent
   by a recursive dive into shadowRoots:
   How can I get all the HTML in a document or node containing shadowRoot elements

3. Let the parent respond to a call from a child
   In control: both Child sends Event, Parent needs to listen
   Webcomponents communicating by custom events cannot send data

The simple answer is that this is just how HTMLDivElement and HTMLElement are defined in the DOM standard at the moment.

To find out more, first take a look at the prototype chain for HTMLElement on MDN:

EventTarget ← Node ← Element ← HTMLElement

We can find out more information about each of these interfaces in the DOM Living Standard. In particular, for Node it says:

Node is an abstract interface that is used by all nodes. You cannot get a direct instance of it.

The spec then says:

Each node has an associated node document, set upon creation, that is a document.

This explains why we need to use document.createElement() to create a HTML element; interfaces with Node in their prototype chain must be associated with a document.

The reason why document.createElement('script') was chosen over something like new HTMLSciptElement(document) is probably because of historical design decisions and consistency with the rest of the DOM which seems to favor factory methods.

There is nothing to stop the authors from making Node constructible in the future but the reason this doesn’t exist now is probably because there isn’t demand for it. It’s interesting to note that one step down the prototype chain is EventTarget which was recently changed to be constructible. It does not have the same document association requirement as Node.

The following code seems to do the trick to some extents but, as mentioned in the comments, compiling from TS to JS via tsc seems to dump the :implements HTMLDivElement part of the initial test.ts class, as a consequence the width and height of the element are ignored.

The result looks like:

In

In the setup() hook, use the expose property of the context argument:

The short answer is that inheritance crosses the Shadow DOM boundary.

See 3.1. Informative Explanation of Shadow DOM. In particular it says:

... the shadow tree, when it exists, is used in the construction of the flattened element tree, which CSS uses for all purposes after Selectors (including inheritance and box construction).

This is why custom properties (CSS variables) can cross the Shadow DOM boundary, as described in the CSS-Tricks article.

Since color is an inherited property, and in your example is not reassigned inside the shadow tree, the text inside inherits the blue color.

OK - so the problem is not with auto-layout...

The problem is that your code is setting the frame of your "bottomLine" layer incorrectly.

Most likely, you're calling your styleTextField() func in viewDidLoad(). However, UIKit has not set the frames of the views / UI elements yet.

You need to wait until the frames are set - such as in viewDidLayoutSubviews(). A new problem will crop up though, as that can be (and usually is) called multiple times, and your code would be creating and adding multiple "bottomLine" layers.

A better option would be to subclass UITextField and handle the layer frame in layoutSubviews().

Here's a quick sample:

You need to move your this.outerHTML = optionsreturn; outside the forEach loop.

I also changed the string into a regular expression in your .replace() call. It will now accept zero or one spaces surrounding your attribute names.

Named slots only accept top-level children that have a matching slot-attribute.

See this (old) Polymer explainer or this more recent article.

Edit: Not sure where this is coming from though, the spec fails to mention this requirement: https://html.spec.whatwg.org/multipage/dom.html#attr-slot

It also is neither mentioned here nor here.

So, after a bit of digging, I came up with the following.

First, let's create a component that uses our external library (Quasar in my case)