Gabriel Ferraz

Thanks for the prompt response. I am looking at the correct components on the browser though. Here you can see that the attribute is changed on the markup after the...

@augustjk i tried that already. Same result.

@sorvell this is how I am setting up the property in the child: ``` @property({ type: String }) variant?: ButtonVariants ``` I tried`$0.variant = 'completed'`, but the variable was not...

I also noticed that though the parent re-renders with the updated variable value (I am logging the value in the render method) the “changedProperties” in the updated lifecycle method is...

@sorvell yes, the component is not updated. But the value is also not updated on the properties tab unless I select another node and then re-select the button node. In...

@sorvell: 1. no console errors 2. ` "typescript": "^3.9.5"` @justinfagnani : Using parcell to bundle the code, here is my `.babelrc`: ``` { presets: ['@babel/typescript'], plugins: [ ['@babel/plugin-proposal-decorators', { legacy:...

@sorvell I created this playground but it is not rendering the button: https://lit.dev/playground/#project=W3sibmFtZSI6Im15LWJ1dHRvbi50cyIsImNvbnRlbnQiOiJpbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50LCBQcm9wZXJ0eVZhbHVlcywgY3NzIH0gZnJvbSAnbGl0J1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcydcbmltcG9ydCB7IGNsYXNzTWFwIH0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvY2xhc3MtbWFwLmpzJ1xuaW1wb3J0IHsgc3R5bGVNYXAgfSBmcm9tICdsaXQvZGlyZWN0aXZlcy9zdHlsZS1tYXAuanMnXG5cbnR5cGUgQnV0dG9uVmFyaWFudHMgPSAnY29tcGxldGVkJyB8ICdpbi1wcm9ncmVzcycgfCAnZGVmYXVsdCdcblxuQGN1c3RvbUVsZW1lbnQoJ215LWJ1dHRvbicpXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBNeUJ1dHRvbiBleHRlbmRzIExpdEVsZW1lbnQge1xuICBzdGF0aWMgc2hhZG93Um9vdE9wdGlvbnM6IFNoYWRvd1Jvb3RJbml0ID0geyBtb2RlOiAnY2xvc2VkJyB9IC8vIHRyaWVkIHdpdGggXCJtb2RlXCIgb3BlbiBhcyB3ZWxsXG4gIHN0YXRpYyBzdHlsZXMgPSBjc3NgXG4gICA6aG9zdCB7XG4gICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgIHdpZHRoOiAxMDAlO1xuICAgICBtaW4td2lkdGg6IDEyMHB4O1xuICAgICBoZWlnaHQ6IDcwcHg7XG4gICB9XG5cbiAgIC5teS1idXR0b24ge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBiYWNrZ3JvdW5kOiBibGFjaztcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgcGFkZGluZy1yaWdodDogMTZweDtcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiA2NHB4O1xuICAgIGNvbG9yOiB3aGl0ZTtcbiAgICBmb250LXdlaWdodDogNjAwO1xuICAgIGdhcDogOHB4O1xuICAgfVxuXG4gIC5teS1idXR0b25fX3RleHQge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgbGluZS1oZWlnaHQ6IDMwcHg7XG4gICAgZm9udC1mYW1pbHk6IE9wdGltaXN0LCBJbnRlciwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgZm9udC1zaXplOiAxOHB4O1xuICB9XG5cbiAgLm15LWJ1dHRvbl9faWNvbi1jb250YWluZXIge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IDIwcHg7XG4gIH1cblxuICAubXktYnV0dG9uX19pY29uIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB3aWR0aDogMjRweDtcbiAgICBoZWlnaHQ6IDI0cHg7XG4gIH1cblxuICAubXktYnV0dG9uX19jaGVja21hcmstaWNvbiB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgd2lkdGg6IDMwcHg7XG4gICAgaGVpZ2h0OiAzMHB4O1xuICB9XG5cbiAgLm15LWJ1dHRvbi0taWNvbi1sZWZ0IHtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93LXJldmVyc2U7XG4gIH1cbiAgYFxuXG4gIEBwcm9wZXJ0eSh7IHR5cGU6IFN0cmluZyB9KVxuICBldmVudElkID0gJydcblxuICBAcHJvcGVydHkoeyB0eXBlOiBTdHJpbmcgfSlcbiAgaWNvblBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnID0gJ3JpZ2h0J1xuXG4gIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogdHJ1ZSwgdHlwZTogU3RyaW5nIH0pXG4gIGljb25TcmMgPSAnJ1xuXG4gIEBwcm9wZXJ0eSh7IHR5cGU6IE9iamVjdCB9KVxuICBzdHlsZU92ZXJyaWRlcyA9IHt9XG5cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiB0cnVlLCB0eXBlOiBTdHJpbmcgfSlcbiAgdGV4dCA9ICcnXG5cbiAvLyBuZXZlciB1cGRhdGVkXG4gIEBwcm9wZXJ0eSh7IHR5cGU6IFN0cmluZyB9KVxuICB2YXJpYW50PzogQnV0dG9uVmFyaWFudHNcblxuLy8gbmV2ZXIgY2FsbGVkXG4gcHJvdGVjdGVkIHVwZGF0ZWQoX2NoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlcyk6IHZvaWQge1xuICAgIGNvbnNvbGUubG9nKCdfY2hhbmdlZFByb3BlcnRpZXMnLCBfY2hhbmdlZFByb3BlcnRpZXMpXG4gIH1cblxuICBvbkNsaWNrKGU6IEV2ZW50KSB7XG4gICAgZG9jdW1lbnQuZGlzcGF0Y2hFdmVudChcbiAgICAgIG5ldyBDdXN0b21FdmVudCh0aGlzLmV2ZW50SWQsIHtcbiAgICAgICAgZGV0YWlsOiB7IGJ1dHRvblRleHQ6IHRoaXMudGV4dCwgb3JpZ2luYWxFdmVudDogZSB9LFxuICAgICAgICBidWJibGVzOiB0cnVlLFxuICAgICAgICBjb21wb3NlZDogdHJ1ZVxuICAgICAgfSlcbiAgICApXG4gIH1cblxuXG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxidXR0b25cbiAgICAgICAgY2xhc3M9JHtjbGFzc01hcCh7XG4gICAgICAgICAgJ2J1dHRvbic6IHRydWUsXG4gICAgICAgICAgJ2J1dHRvbi0taWNvbi1sZWZ0JzogdGhpcy5pY29uUG9zaXRpb24gPT09ICdsZWZ0J1xuICAgICAgICB9KX1cbiAgICAgICAgc3R5bGU9XCIke3N0eWxlTWFwKHRoaXMuc3R5bGVPdmVycmlkZXMpfVwiXG4gICAgICAgIEBjbGljaz1cIiR7dGhpcy5vbkNsaWNrfVwiXG4gICAgICAgIHBhcnQ9XCJidXR0b24tY29udGFpbmVyXCJcbiAgICAgID5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJidXR0b25fX3RleHRcIiBwYXJ0PVwiYnV0dG9uLXRleHRcIj4ke3RoaXMudGV4dH08L3NwYW4-XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiYnV0dG9uX19pY29uLWNvbnRhaW5lclwiPlxuICAgICAgICAgIDxpbWcgY2xhc3M9XCJidXR0b25fX2ljb25cIiBwYXJ0PVwiYnV0dG9uLWljb25cIiBzcmM9JHt0aGlzLmljb25TcmN9IC8-XG4gICAgICAgICAgLy8gdGhpcyBpY29uIGlzIG5ldmVyIGRpc3BsYXllZFxuICAgICAgICAgICR7dGhpcy52YXJpYW50ID09PSAnY29tcGxldGVkJ1xuICAgICAgICAgICAgPyBodG1sYDxpbWdcbiAgICAgICAgICAgICAgICBjbGFzcz1cImJ1dHRvbl9fY2hlY2ttYXJrLWljb25cIlxuICAgICAgICAgICAgICAgIHBhcnQ9XCJidXR0b24tY2hlY2ttYXJrLWljb25cIlxuICAgICAgICAgICAgICAgIHNyYz1cImh0dHBzOi8vbXktaWNvbi5wbmdcIlxuICAgICAgICAgICAgICAvPmBcbiAgICAgICAgICAgIDogJyd9XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgIGBcbiAgfVxufSJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9teS13aWRnZXQuanNcIj48L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuICA8bXktd2lkZ2V0PjwvbXktd2lkZ2V0PlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMi4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjQuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4zLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9LHsibmFtZSI6Im15LXdpZGdldC50cyIsImNvbnRlbnQiOiJpbXBvcnQgeyBjc3MsIGh0bWwsIExpdEVsZW1lbnQgfSBmcm9tICdsaXQnXG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJ1xuaW1wb3J0ICcuL215LWJ1dHRvbi50cycgXG4gICAgXG50eXBlIEJ1dHRvblZhcmlhbnRzID0gJ2NvbXBsZXRlZCcgfCAnaW4tcHJvZ3Jlc3MnIHwgJ2RlZmF1bHQnXG5cbkBjdXN0b21FbGVtZW50KCdteS13aWRnZXQnKVxuZXhwb3J0IGRlZmF1bHQgY2xhc3MgTXlXaWRnZXQgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiBzdGF0aWMgc2hhZG93Um9vdE9wdGlvbnM6IFNoYWRvd1Jvb3RJbml0ID0geyBtb2RlOiAnY2xvc2VkJyB9IFxuICBzdGF0aWMgc3R5bGVzID0gY3NzYFxuICAgIDpob3N0IHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgYFxuICBzdGF0aWMgcmVhZG9ubHkgbW9kYWxDbG9zZUV2ZW50TmFtZSA9ICdteUJ1dHRvbkNsb3NlTW9kYWwnXG4gICAgICBcbiAgQHByb3BlcnR5KHsgdHlwZTogU3RyaW5nIH0pXG4gIGNsaWNrRXZlbnRJZCA9ICdteS1jbGljay1ldmVudC1pZCdcbiAgICAgIFxuICBAcHJvcGVydHkoeyB0eXBlOiBTdHJpbmcgfSlcbiAgaWNvblNyYyA9ICdodHRwczovL2QzNTQ0bGExdThkanphLmNsb3VkZnJvbnQubmV0L0FQSEkvQmxvZy8yMDIxLzA3LTA2L3NtYWxsK3doaXRlK2ZsdWZmeStkb2crc21pbGluZythdCt0aGUrY2FtZXJhK2luK2Nsb3NlLXVwLW1pbi5qcGcnXG5cbiAgQHByb3BlcnR5KHsgdHlwZTogU3RyaW5nIH0pXG4gIGljb25Qb3NpdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JyA9ICdyaWdodCdcblxuICBAcHJvcGVydHkoeyB0eXBlOiBTdHJpbmcgfSlcbiAgdGV4dCA9ICdCdXR0b24gV2lkZ2V0J1xuXG4gIEBwcm9wZXJ0eSh7IHR5cGU6IFN0cmluZyB9KVxuICB2YXJpYW50PzogQnV0dG9uVmFyaWFudHMgPSAnZGVmYXVsdCdcblxuICBjb25uZWN0ZWRDYWxsYmFjaygpIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcih0aGlzLmNsaWNrRXZlbnRJZCwgKGUpID0-IHRoaXMub25DbGlja0hhbmRsZXIoZSkgYXMgdW5rbm93biBhcyBFdmVudExpc3RlbmVyKVxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXG4gICAgICBNeVdpZGdldC5tb2RhbENsb3NlRXZlbnROYW1lLFxuICAgICAgKGUpID0-IHRoaXMuaGFuZGxlTW9kYWxDbG9zZShlIGFzIEN1c3RvbUV2ZW50KSBhcyB1bmtub3duIGFzIEV2ZW50TGlzdGVuZXJcbiAgICApXG4gIH1cblxuICBkaXNjb25uZWN0ZWRDYWxsYmFjaygpIHtcbiAgICBzdXBlci5kaXNjb25uZWN0ZWRDYWxsYmFjaygpXG4gICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcih0aGlzLmNsaWNrRXZlbnRJZCwgKGUpID0-IHRoaXMub25DbGlja0hhbmRsZXIoZSkgYXMgdW5rbm93biBhcyBFdmVudExpc3RlbmVyKVxuICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoTXlXaWRnZXQubW9kYWxDbG9zZUV2ZW50TmFtZSwgKGUpID0-IHRoaXMuaGFuZGxlTW9kYWxDbG9zZShlIGFzIEN1c3RvbUV2ZW50KSBhcyB1bmtub3duIGFzIEV2ZW50TGlzdGVuZXIpXG4gIH1cblxuIGFzeW5jIGhhbmRsZU1vZGFsQ2xvc2UoZTogQ3VzdG9tRXZlbnQ8eyBhY3Rpb25UeXBlOiBCdXR0b25WYXJpYW50cyB9Pikge1xuICAgIHRoaXMudmFyaWFudCA9IGUuZGV0YWlsLmFjdGlvblR5cGUgXG4gICAgdGhpcy5yZXF1ZXN0VXBkYXRlKClcbiAgfVxuXG4gIG9uQ2xpY2tIYW5kbGVyKGU6IEV2ZW50KSB7XG4gICAgZS5zdG9wUHJvcGFnYXRpb24oKVxuICAgICAvLyBoYW5kbGUgY2xpY2tcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxteS1idXR0b25cbiAgICAgICAgZXZlbnRJZD0ke3RoaXMuY2xpY2tFdmVudElkfVxuICAgICAgICBpY29uU3JjPSR7dGhpcy5pY29uU3JjfVxuICAgICAgICB0ZXh0PSR7dGhpcy50ZXh0fVxuICAgICAgICB2YXJpYW50PSR7dGhpcy52YXJpYW50fVxuICAgICAgPjwvbXktYnV0dG9uPlxuICAgIGBcbiAgfVxufSJ9XQ

@christophe-g thanks, the button is loading now. I am dispatching this event from the browser console but the event handler is not getting called: ``` document.dispatchEvent( new CustomEvent('myButtonCloseModal', { detail:...

@sorvell it works when setting the variable directly in the parent. It also works when dispatching the event in the child component click handler but I need to set it...

@sorvell this is what I need: the button click opens a modal that presents the user with a sequence of screens for specific flows. When the modal is closed—and if...