# Rendering Changes in 11.0.0

The Kendo UI for Vue 11.0.0 release introduces changes in the rendering of the Menu, the ContextMenu, the Scheduler events, and the custom items of the TreeView, DropDownTree, and MultiSelectTree. If your application overrides the built-in CSS rules or queries the generated markup, for example in tests, review the following changes.

## Menu

* `ContextMenu`—The component always renders a `Menu` with `contextMenu`. The vertical root `ul` element renders `k-context-menu k-menu-group [k-menu-group-sm|md|lg]` with `role="menu"`, and no longer renders the `k-menu`, `k-reset`, `k-menu-vertical`, and `k-widget` classes.
* `ContextMenu`—The popup closes and queries its items through `[role="menuitem"]` and `.k-menu-popup` instead of the `.k-menu-item` selector.
* `Menu`—The root `ul` element renders `k-reset k-header k-menu k-menu-horizontal|k-menu-vertical` and no longer renders the `k-widget` class. It renders `k-menu-sm|md|lg` when the new `size` property is set.
* `Menu`—The nested popup lists render `k-menu-group [k-menu-group-sm|md|lg]`, computed from `size`, and no longer render the `k-group`, `k-reset`, and hardcoded `k-menu-group-md` classes.
* `Menu`—The `k-first` and `k-last` classes are no longer rendered on the menu items.
* `Menu`—Separators render `li.k-separator.k-item` with the `cssClass` of the item merged in.
* `Menu`—A disabled `MenuItemLink` renders the `k-disabled` class.
* `Menu`—The items with the new `description`, `actionsRender`, `groupHeader`, and `groupHeaderRender` fields render `span.k-menu-link-text`, `span.k-menu-link-description`, `span.k-menu-link-actions`, `li.k-menu-group-header`, and `Icon.k-menu-link-icon`. Text-based selectors such as `li.k-menu-item[.="Text"]` may no longer match.

For more information, see [Menu Rendering](https://www.telerik.com/kendo-vue-ui-develop/components/layout/menu/rendering) and [ContextMenu Rendering](https://www.telerik.com/kendo-vue-ui-develop/components/layout/context-menu/rendering).

## Scheduler

* `SchedulerItem`—The resolved resource color is set as the `--kendo-scheduler-event-color` inline CSS variable. The inline `borderColor` and `backgroundColor` styles are no longer set, so a Kendo theme that consumes the variable is required. Custom components that need the color must read the `--kendo-scheduler-event-color` variable. For more information, see [Scheduler Resources](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/resources).
* `SchedulerItem`—The `k-event-drag-hint` class is rendered on the original item while it is dragged, and the `k-selected` class is rendered on the drag hint.
* `SchedulerItem`—Multi-day timed events render in the all-day area with the `k-event-all-day` class and `k-event-all-day-time` spans for the start and end time. Before, they rendered only in the time slots.
* `SchedulerItem`—The resize hint sets the resolved color through the `--kendo-marquee-color` inline CSS variable instead of inline styles on the `k-marquee-color` element. The `k-marquee-color` and `k-marquee-text` elements of the resize hint have keys and no inline color.
* `SchedulerTask`, `SchedulerEditTask`, `SchedulerViewTask`—The `k-scheduler-mark` element keeps its inline `color` and `backgroundColor` styles and does not use the `--kendo-scheduler-event-color` variable. The color value is now resolved through the theme, so it can differ from the configured resource color.

## TreeView

* `TreeView`, `DropDownTree`, `MultiSelectTree`—A custom item, which you set through the `item` property, renders directly inside the `span.k-treeview-leaf` element. The `span.k-treeview-leaf-text` element is no longer rendered around it. The default rendering without the `item` property still renders `span.k-treeview-leaf-text`. Update the CSS selectors and tests that expect `.k-treeview-leaf-text` around a custom item, or add the `k-treeview-leaf-text` class to the root element of your custom item so that they keep matching.

For more information, see [TreeView Custom Rendering](https://www.telerik.com/kendo-vue-ui-develop/components/treeview/custom-rendering), [DropDownTree Custom Rendering](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdowntree/custom-rendering), and [MultiSelectTree Custom Rendering](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/multiselecttree/custom-rendering).

For the changes in the component behavior and API, see [Breaking Changes in 11.0.0](https://www.telerik.com/kendo-vue-ui-develop/components/updates/breaking-changes/11-0-0).