Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[create] element and class definition should not be separated in all cases

See original GitHub issue

Separating the class definition and the call to customElements.define is inconvenient. It may make sense in some cases when building reusable components, but not when building components for own usage. I think we should not set this up when scaffolding an application.

Issue Analytics

State:
Created 4 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

LarsDenBakkercommented, Apr 18, 2020

The problem here is that registering components is a side effect, one that can’t be undone.

A package entrypoint should never contain any side effects, each side effect should be opt-in with a separate entrypoint. This is best for tree shaking and bundling, and generally for predictability. @daKmoR convinced me of this 😃

For web components scoped custom element registries will make this a more common best practice.

We’re sticking to our current recommendations, I’ll close this issue now.

0reactions

odinhocommented, Apr 18, 2020

Not so hot on the scoping either. But the guide should probably say something on the “material button” import, – something like “// unlike open-wc, this component self-registers, so you don’t need to customElements.define it”, maybe.

Top Results From Across the Web

Cascade, specificity, and inheritance - Learn web development

This behavior helps avoid repetition in your CSS. A common practice is to define generic styles for the basic elements, and then create...

How can I add a class to a DOM element in JavaScript?

This is the simple way, storing all classes in a string. The string can easily be changed or appended. // Create a div...

Selectors - W3C

If all conditions in the pattern are true for a certain element, the selector matches the element. The case-sensitivity of document language element...

How To Modify Attributes, Classes, and Styles in the DOM

In this tutorial, we will learn how to further alter the DOM by modifying styles, classes, and other attributes of HTML element nodes....

:not | CSS-Tricks - CSS-Tricks

Our CSS would select all the <li> elements except the one(s) with a class of .different . ... You could also do the...