QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.84k stars 1.31k forks source link

Merging bindings on Host Element is not working #668

Closed mhevery closed 2 years ago

mhevery commented 2 years ago

[ Repro ]

When both the parent and child bind to host element the chlid wins. This is not correct as parent should have higher prioriy.

import { component$, Host, QRL, Slot, useStore } from '@builder.io/qwik';

export const App = component$(() => {
  const store = useStore({ count: 0 });
  return (
    <MyButton onClick$={() => store.count++} host:style={{ backgroundColor: 'red' }}>
      {store.count}
    </MyButton>
  );
});

interface MyButtonProps {
  onClickQrl?: QRL<(event: Event) => void>;
}
export const MyButton = component$(
  (props: MyButtonProps) => {
    return (
      <Host onClickQrl={props.onClickQrl} style={{ backgroundColor: 'lightpink', padding: '1em' }}>
        <Slot />
      </Host>
    );
  },
  { tagName: 'button' }
);

In the above example, the final background-color should be red and it should have padding of 1em

manucorporat commented 2 years ago

Duplicated of https://github.com/BuilderIO/qwik/issues/263