Standard behaviour of dropdown buttons and its styling

I have been reviewing some UI design patterns where the use of dropdown buttons as both a selection and call-to-action has been ambiguous, and I am thinking of how it relates to various design patterns and modes of interaction that is out there.

The basic design of a dropdown button has two components, the left hand side consisting of a label that is the primary or default call-to-action, while the right hand side has the typical down arrow used in dropdown menus or selection input.

The problem arises when the right hand side isn't styled as a separate 'button', which leads to people thinking whether clicking on the whole button should just default to a selection interaction with the actual selection serving as the call-to-action. However, this then defeats the purpose of splitting the button up so you can have the call-to-action and selection working independently.

I am wondering if there is a difference in the styling and interaction/behaviour for dropdown buttons, especially between Bootstrap and Material Design, and whether people follow those implementation conventions or if there's another 'standard' design pattern out there?

Boostrap single and split button dropdown component: http://getbootstrap.com/components/#btn-dropdowns

Google material design dropdown button component: https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons

Additionally, does this matter whether you are doing a single selection or multiple section for the right hand side? I assume it does because then the left hand side label might actually stay the same unlike for a single selection where the label might change to correspond with the selection.