How to use Custom Elements in Wix (and when)

#wix #wixwebsite #wixtutorial #website #webdesign #webdev
Join this channel to get access to perks:

New to Velo? Try my new Velo for Beginners course now on Udemy!

Timeline:
1:02 - How to Add a Custom Element
3:34 - How to Setup a Custom Element
7:58 - Why Use a Custom Element
15:09 - Advantages of a Custom Element
16:50 - Building a Custom Element
21:01 - Introduction to Shadow DOM
25:57 - Adding Styles to a Custom Element
31:01 - Troubleshooting Styling Issues
41:10 - Changing Attributes in a Custom Element
47:22 - Setting Attributes Using Velo Code
55:10 - Establishing Two-Way Communication
59:45 - Multi-Select Dropdown Example

Have an idea for a video? suggest it here:

Have questions? Join the discussion:

Want to have joint coding session? Book one now:

Have questions? Need some magic done on your website ASAP?

Follow along on Twitter @thewixwiz

[thewixwiz]

Note: When creating custom elements in Blocks you may need to use this alternate syntax for declaring the observed attributes:
static get observedAttributes() {
return ["color", "size"];
}

[HofmannsDream-bvnj]

Wow! Definitely yes for more custom elements, and it would be very cool if we could create a custom repeater and populate it with data from the CMS. I recently watched your Udemy course on repeaters, queries, etc., and loved it!

[ukaszartemiuk]

hey i have a question, first i have premium and what is very interesting i don't have such panel like you. I see a lot of people have this wixstudio, mine is a bit different. Its freaking me out that i cant modify normally css and other stuff, but my question is about making a box (for example 1920x1080) inside which i will have my own app (game). But i want this box to proportionatelly change if the browser is smaller or bigger. I tired to dynamically take window height and width but nothing worked. How to make such thing?

[MYKOTECH]

I'm I'm so glad so much thank you you are so helpful teacher

[tadmorguy]

Thanks for the tutorial, why the custom element cannot be stretched like any other element on Wix studio? due to that I had to put a scroll bar on the custom element.

[DanielNewton-tdxt]

Could you import the stylesheet from another document rather than writing it in the same file?

[krizdsounds]

Hey, I'm not sure if you or someone will see this but, is it possible to add a custom HTML to a repeater?

[federalix]

hello Eitan, I am a big fan of your videos. I wanted to ask you, do you think this could be a solution to add a gallery to a repeater, as pro galleries can't be added? Or how would you do this?

[lab__guy]

hope you see this comment I know a little bit of HTML, JS, CSS, I want to build a internet speed examiner with WIX but I don't know how to add a costume code and how add a button and a responsive diagram to show internet stats, actually I don't know how to indicate an action to a button on WIx

[m.shokarim]

Man, you’re a lifesaver. I needed to make a meme generator (I.e drag and drop an image, resize, and download it with a new background). And the stupid chatgpt (the o1 model mind you) couldn’t figure it out. Thank the universe I found your video. Everything was explained quite well and you really saved my day 🫶

[mrsamadon]

Hi @thewixwiz, this video is very helpful thank you so much. I have a problem on my site that when a member update their info. In The cms member/FullData i added a hook after update that never call when a site member update their info. But hook is called when admin update. Is there any way to call hook in member fulldata by site member?