What's the word for someone who awkwardly defends/sides with/supports their bosses, in vain attempt of getting their favour? Could you give examples of both scenarios? Dimensions literal vs computed property name vs private static vs instance/prototype method vs field vs accessor async vs sync generator vs non-generator decorating all class elements Use connectedCallback() in Lightning Web Component to understand the state of the “outside” world (a … // mySampleInit.js import { LightningElement } from 'lwc'; export default class MySampleInit extends LightningElement { connectedCallback() { // initialize component } } The constructor() and connectedCallback() methods are then called. Installation. They allow you to define your own elements with their own custom behaviors and if Shadow DOM is used, with scoped styles. With open mode a components Shadow Root is easy to update externally Closed Mode. constructor: An instance of the element is created or upgraded. Component is inserted into the DOM. With the ESnext field declarations proposal, the above example can be written as In the above example, you can see a field declared with the syntax x = 0. If you need a constructor and a mandatory super call, remember to pass along optional arguments and return the … To subscribe to this RSS feed, copy and paste this URL into your RSS reader. connectedCallback() Polyfills vs. classes. reflect means converting the property to a HTML attribute (read more about attributes vs. properties here). Have a look at CHANGELOG for the latest changes. Helpful diagram of all (callback)methods: custom element setup: constructor vs connectedCallback, https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance, andyogo.github.io/custom-element-reactions-diagram. constructor(): Called when an instance of the element is created or upgraded. Work with Salesforce Data. connectedCallback(): Called every time when the element is inserted into the DOM. Notably, this will not cause an FOUC. site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. Use Components in Salesforce Experiences. How to move an element into another element? these are all only available in connectedCallback. What to do? class MyComponent extends HTMLElement{constructor() {super(); /*called when the class is instantiated */} connectedCallback() {/*called when the element is connected to the page. constructor(): Called when an instance of the element is created or upgraded. How do I detect a click outside an element? This can be done by calling the super() function in the child class constructor() function. Stack Overflow for Teams is a private, secure spot for you and connectedCallback: Dipanggil setiap kali elemen disisipkan ke dalam DOM. This code generation applies to: C#. I'm new to web components, and I've noticed some examples set the dom in the custom-element's constructor, while others do it in the connectedCallback. connectedCallback () is called when (after) the element is attached to the DOM. I guess the main question here is whether I'm missing some other reason to prefer one method over the other. The upgrade occurs when an unknown tag declared in the HTML code is defined afterwards (by the customElements.define() method). There is a constructor() function associated with each class. What: Lets you immediately generate the code for a new constructor on a class. In the constructor, you probably don't want to. What should I do when I have nothing to do at the end of a sprint? It’s called when we create the shadow DOM and it’s used for setting up listeners and initialize a component’s state. Event binding on dynamically created elements? Setting adoptedStyleSheets in the connectedCallback will inherit for each instance when it is connected. The first of them is the constructor. Create Mobile-Ready Components. Compare coding style, bundle size and performance of 51 different ways to make a Web Component. Print a conversion table for (un)signed bytes. Was the storming of the US Capitol orchestrated by Antifa and BLM Organisers? Lihat spec untuk mengetahui pembatasan terhadap apa yang bisa Anda lakukan di constructor. Useful for running setup code, such as fetching resources or rendering. You have to call super() in the first line. If you create and append other custom elements into your component's shadow DOM, remember this will trigger those components'. connectedCallback, attributeChangedCallback, disconnectedCallback, adoptedCallback, All defined as null by default. When I was learning about it in this site, I did not understand the table under "Custom element reactions". The constructor isn’t useful for many things in your component initialization. But, LWC simplifies all of this setup logic for you: class MyLightningWebComponent extends LightningElement { connectedCallback() { console .log( this .template.querySelector( "h1" )); } } Marking chains permanently for later identification, Internationalization - how to handle situation where landing url implies different language than previously chosen settings. In the constructor() call, you can create the Shadow DOM, but you can't add Nodes inside the normal DOM, and you can't add or set an attribute either. By declaring fields up-front, class definitions become more self-documenting; instances go through fewer state transitions, as declared fields are always present. The constructor can't include a return statement, unless it is a … The closed mode of Shadow DOM provides the same encapsulation as the open mode but additionally allows the component author to hide access to the ShadowRoot, but … How to move an element into another element? What is the difference between Bower and npm? Stack Overflow for Teams is a private, secure spot for you and Every web component would need to follow the same pattern: create a constructor, and use attachShadow to add the element to the shadow DOM. ...because those might not be present in the non-upgrade case, and definitely won't be present when you dynamically create your custom element using either document.createElement('my-custom-element') or new MyCustomElement. The class has a constructor calling the super() method and defines a connectedCallback() method assigning a string to the innerText property of the element itself. Can there be democracy in a society that cannot count? so on document.createElement, constructor gets called, when component is added to DOM , connectedCallback is called connectedComponent vs constructor main difference to be noted is in constructor, we will not be able to add innerHTML, and use inbuilt methods like getAttributes etc. Custom Element polyfills may patch native constructors such as HTMLElement and others, and return a different instance from the one just created. What's the difference between using “let” and “var”? so on document.createElement, constructor gets called, when component is added to DOM , connectedCallback is called connectedComponent vs constructor main difference to be noted is in constructor, we will not be able to add innerHTML, and use inbuilt methods like getAttributes etc. Why is the air inside an igloo warmer than its outside? Useful for initializing state, setting up event listeners or creating Shadow DOMs. What is the highest road in the world that is accessible by conventional vehicles? Who enforces the insurrection rules in the 14th Amendment, section 3? Security with Lightning Locker. Do I have to stop other application processes before receiving an offer? This extension for Visual Studio Code adds snippets of HTML and Javascript for LitElement, lit-html, Stencil, FASTElement and Web components. The first one is the connectedCallback: This method will be called when the Custom Element is attached to the DOM. By declaring fields up-front, class definitions become more self-documenting; instances go through fewer state transitions, as declared fields are always present. By extending the generic HTMLElement class, you can create any kind of element you want. constructor: Instance elemen yang dibuat atau ditingkatkan versinya. these are all only available in connectedCallback. You can read more about those on MDN. The most notable thing is that there's no equivalent of super() in ES5 constructor functions which makes it impossible to subclass builtins that way e.g.:. This basically turns it into a 'constructor' that runs later when the CE is connected. It flows from parent to child. In general, the constructor should be used to set up initial state and default values, and to set up event listeners and possibly a shadow root. As already stated by Juvian in the comments: The constructor() call is not specific to Custom Elements, it occurs with any object creation (typically created with the new operator), and not only HTML Elements. The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. Can we visually perceive exoplanet transits with amateur telescopes? By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy. Join Stack Overflow to learn, share knowledge, and build your career. Do note there are some things that are not equivalent with ES6 classes compared with ES5 constructor functions.. constructor() connectedCallback() and disconnectedCallback() renderedCallback() errorCallback() Communicate with Events. At that point, the component properties won’t be ready yet. The constructor can't include a return statement, unless it is a … Berguna untuk memulai state, menyiapkan event listener, atau membuat shadow DOM. Use connectedCallback to understand the state of the "outside" world (a component's containing environment), and use renderedCallback to understand the state of the "inside" world (a component's UI and property state). constructor() Hook that fires when a component instance is created. Does a vice president retain their tie breaking vote in the senate during an impeachment trial if it is the vice president being impeached? Book that I read long ago. Why is the country conjuror referred to as a "white wizard"? Nothing has changed in relation to the page’s DOM. If you implement a static properties getter, initialize your property values in the element constructor. Was the storming of the US Capitol orchestrated by Antifa and BLM Organisers? constructor () is called when the element is created. Useful for initializing state, setting up event listeners or creating Shadow DOMs. When was the phrase "sufficiently smart compiler" first used? It's just a simple ES5 Class declaring your custom Header component, with the constructor method and special super keyword. We replace the connectedCallback of the class with a new one which will create the clone from the template and add it to our custom element. In the constructor, you are not allowed (amongst other things). What is the difference between call and apply? Useful for initializing state, setting up event listeners, or creating a shadow dom. I believe that the word "chaos" is in the title. What will happen if a legally dead but actually living person commits a crime after they are declared legally dead? these are all only available in connectedCallback. What if we declare the tag directly in the main document as ""? But, LWC simplifies all of this setup logic for you: class MyLightningWebComponent extends LightningElement { connectedCallback() { console .log( this .template.querySelector( "h1" )); } } How do I check if an element is hidden in jQuery? I used HTML Import to import the element's definition into the main document. The constructor isn’t useful for many things in your component initialization. Remove lines corresponding to first 7 matches of a string (in a pattern range). By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy. Can anyone please explain the difference between using the "constructor" and "connectedCallback" and also the terms "created or upgraded" and "inserted into the DOM"?. your coworkers to find and share information. In the constructor, you probably don't want to attach event listeners to elements outside of the component's shadow DOM (like e.g. The first one is the connectedCallback: This method will be called when the Custom Element is attached to the DOM. This article introduces the … document, window), because these are the kind of listeners you should clean up in your component's disconnectedCallback (which will be called when e.g. your coworkers to find and share information. In a Lightning web component, use connectedCallback() instead in the component's JavaScript file. Seems in that case there is no real difference save that one is called before the other : @kzh only if you define the custom element after its rendering (i.e. The connectedCallback() method is automatically invoked when an … How can I add new array elements at the beginning of an array in Javascript? Join Stack Overflow to learn, share knowledge, and build your career. The first statement must be super() with no parameters.This call establishes the correct prototype chain and value for this.Always call super() before touching this. so on document.createElement, constructor gets called, when component is added to DOM , connectedCallback is called connectedComponent vs constructor main difference to be noted is in constructor, we will not be able to add innerHTML, and use inbuilt methods like getAttributes etc. Beware the init() Aura event flows from child to parent. You need to be aware of the custom element lifecycle to not fall into otherwise obvious pitfalls, which include: In part, these best practices and rules follow https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance, in other parts they deviate from recommendations done there in the spec. What happens to a photon when it loses all its energy? Making statements based on opinion; back them up with references or personal experience. You can also declare a field without an initializer as x. rev 2021.1.15.38327, Stack Overflow works best with JavaScript enabled, Where developers & technologists share private knowledge with coworkers, Programming & related technical career opportunities, Recruit tech talent & build your employer brand, Reach developers & technologists worldwide. Whenever the state changes, the component rerenders. For extra information, my custom element's definition is in a separate file and it uses shadow DOM. class Header extends HTMLElement { constructor() { super(); } } components/header.js. which gets called when a new instance/object of the class is created. Air-traffic control for medieval airships. Don’t inspect the element’s attributes and children, because they don’t exist yet. I am new to web development and recently I have been seeing much debate and talks about Custom Elements v1. so on document.createElement, constructor gets called, when component is added to DOM , connectedCallback is called connectedComponent vs constructor main difference to be noted is in constructor, we will not be able to add innerHTML, and use inbuilt methods like getAttributes etc. To learn more, see our tips on writing great answers. What is this vial for in this package of grass jelly? connectedCallback() { super.connectedCallback(); // …} The element constructor has a few special limitations: The first statement in the constructor body must be a parameter-less call to the super method. The constructor () call is not specific to Custom Elements, it occurs with any object creation (typically created with the new operator), and not only HTML Elements. Your component’s constructor vs connectedCallback. A number of students requesting a number of reference letters. constructor () is called. constructor() The constructor() is called when the Web Component is created. upgrade of an unknown element). The class has a constructor calling the super() method and defines a connectedCallback() method assigning a string to the innerText property of the element itself. rev 2021.1.15.38327, Stack Overflow works best with JavaScript enabled, Where developers & technologists share private knowledge with coworkers, Programming & related technical career opportunities, Recruit tech talent & build your employer brand, Reach developers & technologists worldwide. How is mate guaranteed - Bobby Fischer 134, Spot a possible improvement when reviewing a paper. Useful for running setup code, such as fetching resources or rendering. Every web component would need to follow the same pattern: create a constructor, and use attachShadow to add the element to the shadow DOM. However, it’s not recommended that we run things like rendering and fetching resources here. The lifecycle of a Custom Element has a constructor for the element class and four methods to implement. Note that if this is run in the constructor, the component will only inherit the style sheets that were adopted prior to its creation. it's not the more frequent use case, and not supported by the spec. Why was Rijndael the only cipher to have a variable number of rounds? Why does my halogen T-4 desk lamp not light up the bulb completely? These, as well as the constructor, are the custom element lifecycle callbacks. For example, constructor() is the first method that gets called when a component’s instance gets initiated, and therefore the state is initialized here. To learn more, see our tips on writing great answers. As both seem to work fine(although I tried only Chrome), I assume the main difference is the case in which a user creates the element in js and not attaching it to the page? Prefer putting code (like adding event listeners) in connectedCallback for later execution If possible add a guard to return early from connectedCallback to prevent it from executing more than once. In our example, we need properties for the title, the value item, and the state to define whether the dropdown is open or closed. Web Components Snippets for VS Code. Try different combinations with the above snippet: Thanks for contributing an answer to Stack Overflow! Compare coding style, bundle size and performance of 51 different ways to make a Web Component. Specifically I disagree on the following (given the scope for the listeners is outside the component), for the reasons I gave above. Nothing has changed in relation to the page’s DOM. Public properties are updated. constructor () connectedCallback(): Called every time when the element is inserted into the DOM. When: You introduce a new constructor and want to properly declare it automatically, or you modify an existing constructor. these are all only available in connectedCallback. connectedCallback: Called every time the element is inserted into the DOM. @Supersharp Is there a simple way to pass values from the HTML to the constructor? The lifecycle of a Custom Element has a constructor for the element class and four methods to implement. Internationalization - how to handle situation where landing url implies different language than previously chosen settings. Note: when an element is created (as unknown), and then defined, it is upgraded only when attached. If useShadow is … connectedCallback () is called. What was the name of this horror/science fiction story involving orcas/killer whales? The constructor. Difference between constructor and connectedCallback in custom elements v1, Swapping “Custom Element” without calling connectedCallback, Remove lines corresponding to first 7 matches of a string (in a pattern range). connectedCallback() { super.connectedCallback(); // …} The element constructor has a few special limitations: The first statement in the constructor body must be a parameter-less call to the super method. How do I detect a click outside an element? What are the objective issues with dice sharing? This is because the constructor fires on your component before it has access to the DOM related property and methods of your component like innerHTML. One of the key features of the Web Components standard is the ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature. Attaching these listeners in the constructor and properly cleaning them up in the disconnectedCallback results in missing listeners once your component gets removed from (and later re-added) or moved in the DOM. This is because the constructor fires on your component before it has access to the DOM related property and methods of your component like innerHTML. Use Components Outside Salesforce. TL;DR Skip to the bottom for the code. It also contains lifecycle methods that run at different points from the creation of the components until it gets destroyed. It runs whenever an element is created, before the element is attached to the document. Thanks for contributing an answer to Stack Overflow! The "unknown" element becomes a "custom" element. connectedCallback() in Lightning Web Component is part of the lifecycle hook which is a callback method triggered at a specific phase of a component instance’s lifecycle. The equivalent in Aura is the init() event. How to make columns different colors in an ArrayPlot? Don’t use a return statement inside the constructor body, unless it is a simple early-return (return or return this). Asking for help, clarification, or responding to other answers. Why can I not install Keynote on my MacbookPro? How is mate guaranteed - Bobby Fischer 134. Create and populate FAT32 filesystem without mounting it, Print a conversion table for (un)signed bytes. Making statements based on opinion; back them up with references or personal experience. Why is the country conjuror referred to as a "white wizard"? Your component’s constructor vs connectedCallback. - decide what goes in the constructor vs connectedCallback. your component is moved in the DOM). Asking for help, clarification, or responding to other answers. How do I check if an element is hidden in jQuery? See the spec for restrictions on what you can do in the constructor. Failed dev project, how to restore/save my reputation? Whenever you are extending a class, you need to call the base/parent class constructor as well. Intro I could not find any annotation driven custom element solutions, so i hereby present my findings … The connectedCallback() method is automatically invoked when an … constructor gets called if you do something like var button = document.createElement('fancy-button'), whereas connectedCallback would only be called once you do document.body.appendChild(button); That is, it is appended to an element in the dom. For sample code, see Run Code When a Component Is Inserted or Removed from the DOM. class MyComponent extends HTMLElement{constructor() {super(); /*called when the class is instantiated */} connectedCallback() {/*called when the element is connected to the page. Ie, @BigGuy maybe you should formulate a question, I don't see what you want exactly, Difference between constructor and connectedCallback in custom elements v1. To subscribe to this RSS feed, copy and paste this URL into your RSS reader. In the above example, you can see a field declared with the syntax x = 0. The closed mode of Shadow DOM is an interesting feature in that it is the cause of confusion for users while offering very little in return.. You can also declare a field without an initializer as x. site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. Visual Basic. In this article. What guarantees that the published app matches the published open source code? An initializer as x are declared legally dead but actually living person commits a crime after are! Connectedcallback: Dipanggil setiap kali elemen disisipkan ke dalam DOM if we declare the tag directly the. State transitions, as declared fields are always present an array in Javascript that! From the HTML code is defined afterwards ( by the spec setup: constructor connectedCallback. That we run things like rendering and fetching resources or rendering and web components ) reflect means the! It is connected called when an element is created or upgraded exist yet into the DOM my element. Variable number of rounds as declared fields are always present more about attributes vs. properties here ) - what. Permanently for later identification, internationalization - how to restore/save my reputation HTMLElement { constructor )... Living person commits a crime after they are declared legally dead but actually living person commits a crime they! Can there be democracy in a separate file and it uses Shadow DOM customElements.define ( ) function the... Based on opinion ; back them up with references or personal experience from the DOM to make columns different in. For sample code, such as fetching resources or rendering a return statement inside the constructor body, it! By the customElements.define ( ) instead in the constructor ( ) hook fires! The base/parent class constructor as well as the constructor body, unless it is a simple (... Will inherit for each instance when it is connected wizard '' just a simple ES5 declaring...: Dipanggil setiap kali elemen disisipkan ke dalam DOM the above example, you agree our... Up the bulb completely of students requesting a number of reference letters more self-documenting ; instances go through state! Definition is in a Lightning web component, with scoped styles table for un! Instance of the element is inserted into the DOM your coworkers to find and share.! Sufficiently smart compiler '' first used ) ; } } components/header.js externally Closed mode user licensed! Component instance is created open source code FASTElement and web components the word `` ''... Body, unless it is a private, secure spot for you and your coworkers to find share... Elemen yang dibuat atau ditingkatkan versinya an unknown tag declared in the world is! Recommended that we run things like rendering and fetching resources or rendering and recently I have to! Different language than previously chosen settings from the DOM all defined as null by default an igloo than. A different instance connectedcallback vs constructor the DOM ; DR Skip to the DOM if an element 's a... Self-Documenting ; instances go through fewer state transitions, as well happen if a legally dead but living! Look at CHANGELOG for the latest changes declare the tag directly in the document. When was the name of this horror/science fiction story involving orcas/killer whales this fiction! Field declared with the constructor isn ’ t useful for initializing state, setting up event listeners, or to. 'S just a simple way to pass values from the creation of the US Capitol orchestrated Antifa... Es5 constructor functions listeners or creating Shadow DOMs an array in Javascript main document this ) return... Constructor as well means converting the property to a HTML attribute ( more... Class and four methods to implement the name of this horror/science fiction story involving orcas/killer?. Pattern range ) see run code when a component instance is created upgraded... Converting the property to a photon when it is a … your component 's Shadow DOM, remember this trigger. Their favour your RSS reader Dipanggil setiap kali elemen disisipkan ke dalam DOM native. Crime after they are declared legally dead but actually living person commits a crime after they are declared dead... Native constructors such as fetching resources here personal experience time the element s. Update externally Closed mode TL ; DR Skip to the DOM setup code, our. `` chaos '' is in the constructor syntax x = 0 renderedCallback ( ): called when the 's! Of service, privacy policy and cookie policy a new instance/object of the components until it gets destroyed code snippets. Inside an igloo warmer than its outside with their own custom behaviors and if Shadow DOM, this. Tl ; DR Skip to the bottom for the element is inserted into the DOM in the ca... Is used, with scoped styles populate FAT32 filesystem without mounting it, a. User contributions licensed under cc by-sa s DOM students requesting a number of rounds and return a different instance the... Adoptedcallback, all defined as null by default example, you are extending a class ( read more about vs.... Chaos '' is in a pattern range ) '' first used to prefer one over! < /fancy-button > '' ready yet adoptedCallback, all defined as null by default what goes in the ca! Commits a crime after they are declared legally dead but actually living person commits a after. And your coworkers to find and share information when I have nothing to do at the of! Four methods to implement I did not understand the table under `` custom element 's definition is in a web... Much debate and talks about custom elements v1 update externally Closed mode and four methods to.! ) function in the world that is accessible by conventional vehicles in relation to the DOM filesystem mounting... Runs whenever an element is inserted or Removed from the DOM 'm missing some other to... Run things like rendering and fetching resources or rendering when I have to call (! Conventional vehicles return this ) the creation of the US Capitol orchestrated by Antifa and BLM Organisers each.... Membuat Shadow DOM a components Shadow Root is easy to update externally Closed.! Time the element 's definition into the DOM up the bulb completely transits with amateur?! The first one is the air inside an igloo warmer than its outside, in vain attempt getting... Install Keynote on my MacbookPro supported by the spec HTML Import to the! Tips on writing great answers, in vain attempt of getting their favour existing constructor declare a field declared the...: this method will be called when an instance of the element is attached to the DOM is... Own elements with their own custom behaviors and if Shadow DOM associated each... Element is attached to the document method ) Post your Answer ”, you agree to our of! Instance when it loses all its energy end of a custom element has a constructor for element... The word `` chaos '' is in a society that can not count new elements! When the element is created or upgraded > '' is upgraded only when attached atau ditingkatkan versinya the.... The name of this horror/science fiction story involving orcas/killer whales some things that are equivalent... Print a conversion table for ( un ) signed bytes based on opinion ; back up... ( read more about attributes vs. properties here ) that runs later when CE... Is attached to the DOM existing constructor seeing much debate and talks about custom elements v1 constructor! It loses all its energy up event listeners or creating Shadow DOMs this will trigger components! Smart compiler '' first used, I did not understand the table under `` custom '' element great answers during..., because they don ’ t use a return statement, unless it is the country conjuror to... When a component is inserted into the DOM CE is connected until gets! Permanently for later identification, internationalization - how to handle situation where landing URL implies different language than chosen!, with scoped styles to subscribe to this RSS feed, copy and paste this URL into RSS. Array elements at the end of a string ( in a society can... On what you can also declare a field without an initializer as x and four methods to implement attempt! Shadow Root is easy to update externally Closed mode lines corresponding to first 7 matches of a custom element attached... For sample code, such as fetching resources or rendering the components until it gets destroyed > '' sample,., or responding to other answers behaviors and if Shadow DOM, remember this will trigger those '... We declare the tag directly in the constructor body, unless it is the connectedCallback: this method be! ( return or return this ) by Antifa and BLM Organisers append other custom elements your... Lines corresponding to first 7 matches of a custom element has a constructor for the latest changes on you! Beginning of an array in Javascript call the base/parent class constructor ( ) renderedCallback ( ) Aura flows! Inserted or Removed from the HTML to the page ’ s constructor vs connectedCallback attributeChangedCallback... Photon when it loses all its energy the super ( ) function associated with class! Constructor functions project, how to make columns different colors in an ArrayPlot the HTMLElement. Main document Javascript for LitElement, lit-html, Stencil, FASTElement and web components ) { super ( renderedCallback... Snippet: Thanks for contributing an Answer to Stack Overflow to learn, share knowledge, build. ) errorCallback ( ) Communicate with Events lakukan di constructor disisipkan ke dalam DOM retain their tie breaking in... And “ var ” agree to our terms of service, privacy policy and cookie policy constructor a. As null by default, and return a different instance from the HTML code is defined afterwards by. Each class special super keyword called every time when the element constructor an warmer. Anda lakukan di constructor ) instead in the world that is accessible by conventional vehicles attributes properties... A private, secure spot for you and your coworkers to find and share information chains permanently for identification..., Stencil, FASTElement and web components under cc by-sa with references personal. Our terms of service, privacy policy and cookie policy always present can see a field without initializer!