search

glimmerjs / glimmer-web-component

Library to boot up your Glimmer components as Web Components
https://glimmerjs.com/guides/using-glimmer-as-web-components
MIT License
30 stars 11 forks source link

WIP: Assume element + shadow dom #18

Closed pittst3r closed 6 years ago

pittst3r commented 7 years ago

Requires:

Renders as fragment into the custom element’s shadowRoot

Usage of the shadow DOM is required for slots, which we need if we want to have content in a custom element’s innerHTML. We render as a fragment because requiring a root element wrapping the content in the shadowRoot doesn’t make sense. And the semantics of a regular layout imply that the layout contains the root element of the component. Which is not the case here. The root element of the component in this case is the custom element, which already exists and we are rendering the layout into it.

Provides a didAppendLayout hook in place of didInsertElement

Since we are not inserting the element here; it’s already been inserted. We are rendering content into an already-existing element. didAppendLayout fires after the content is rendered into the shadowRoot node of the custom element.

Eagerly sets element property to custom element

The custom element is available via the element property as early as the invocation of the constructor of the component class. From here one can access attributes and properties on the element and use them for initial or subsequent renders. The element properties and attributes are not tracked (changes to them will not trigger a rerender).

Makes use of the feature-flagged {{use-component-manager pragma

One must stick {{use-component-manager “custom-element”}} at the top of custom-element-enabled Glimmer component templates to make all this work because we are using a custom component manager.

No args

The CustomElementComponentManager removes this.args, since that is not a thing you can do with custom elements.

knownasilya commented 7 years ago

This is what I've wanted to do, but had no idea how 👍 . Love this, even if it's a short-term solution.

mikkopaderes commented 7 years ago

@robbiepitts, not sure if it's final yet but if you're going to remove @props and this.args then the section of the docs where it states

If you already have an app and you want to use it as a Web Component, install the following package using yarn:

should be removed so no future expectations will be implied to devs.

Please ignore if the plan to remove that is already in place. 😬

pittst3r commented 7 years ago

@rmmmp Thanks for pointing that out, I probably would have missed it. Definitely not final though. Pending feedback.

pittst3r commented 6 years ago

Closing, old and busted. This was experimental and probably not a good direction for @glimmer/web-component.